-
-
Save Visionchen/03ab71e0f8710de45002b7b3682b8696 to your computer and use it in GitHub Desktop.
vue3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ## Vue3 里 script | |
| Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API | |
| ### setup() | |
| ```javascript | |
| <template> | |
| <div>{{ count }}</div> | |
| <button @click="onClick"> | |
| 增加 1 | |
| </button> | |
| </template> | |
| <script> | |
| import { ref } from 'vue'; | |
| export default { | |
| // 注意这部分 | |
| setup() { | |
| let count = ref(1); | |
| const onClick = () => { | |
| count.value += 1; | |
| }; | |
| return { | |
| count, | |
| onClick, | |
| }; | |
| }, | |
| } | |
| </script> | |
| ``` | |
| ### 精简 => <script setup> | |
| ```javascript | |
| <template> | |
| <div>{{ count }}</div> | |
| <button @click="onClick"> | |
| 增加 1 | |
| </button> | |
| </template> | |
| <script setup> | |
| import { ref } from 'vue'; | |
| const count = ref(1); | |
| const onClick = () => { | |
| count.value += 1; | |
| }; | |
| </script> | |
| ``` | |
| #### ref reactive | |
| - ref 如果传入的是引用类型，内部源码也是调用 reactive 来实现的 | |
| - ref 返回的属性在 template 中使用，直接用就是了，但是在 JS 中使用，需要通过 .value 获取，如下。因为 ref 返回的是一个包装对象 | |
| ```javascript | |
| <template> | |
| <div>{{ count }}</div> | |
| </template> | |
| <script setup> | |
| import { ref, reactive } from 'vue' | |
| const count = ref(1) | |
| // 有人这么用 | |
| const arr = ref([]) | |
| console.log(arr.value) // [] | |
| // 也有人这么用，一个组件里所有的属性全部定义在一个对象里，有点 Vue2 data 的味道 | |
| const data = reactive({ | |
| name: '小猫', | |
| age: 18, | |
| ... | |
| }) | |
| console.log(data.name) // 小猫 | |
| // 也有人一个组件里 ref 和 reactive 两种都用，随便你 | |
| </script> | |
| ``` | |
| ### toRef 和 toRefs | |
| 创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性 | |
| ```javascript | |
| const data = reactive({ | |
| name: '小猫', | |
| age: 18 | |
| }) | |
| // 这样虽然能拿到 name / age，但是会变成普通变量，没有响应式效果了 | |
| const { name, age } = data | |
| // 取出来一个响应式属性 | |
| const name = toRef(data, 'name') | |
| // 这样解构出来的所有属性都是有响应式的 | |
| const { name, age } = toRefs(data) | |
| // 不管是 toRef 还是 toRefs，这样修改是会把 data 里的 name 改掉的 | |
| // 就是会改变源对象属性，这才是响应式该有的样子 | |
| name.value = '小猫' | |
| ``` | |
| ### watch watchEffect | |
| watch 需要你明确指定依赖的变量，才能做到监听效果。 | |
| 而 watchEffect 会根据你使用的变量，自动的实现监听效果。 | |
| ```javascript | |
| <script setup> | |
| import { watch, ref, reactive } from 'vue' | |
| const name = ref('小猫') | |
| const data = reactive({ | |
| age: 18, | |
| money: 100000000000000000000, | |
| children: [] | |
| }) | |
| // 监听 ref 属性 | |
| watch(name, (newName, oldName) => { ... }) | |
| // 监听其他属性、路由或者状态管理的都这样 | |
| watch( | |
| () => data.age, | |
| (newAge, oldAge) => { ... } | |
| ) | |
| watchEffect(() => { | |
| // 会自动根据 count.value 的变化， | |
| // 触发下面的操作 | |
| anotherCount.value = count.value - 1; | |
| }) | |
| // 监听多个属性，数组放多个值，返回的新值和老值也是数组形式 | |
| watch([data.age, data.money], ([newAge, newMoney], [oldAge, oldMoney]) => { ... }) | |
| // 第三个参数是一个对象，为可配置项，有5个可配置属性 | |
| watch(data.children, (newList, oldList) => { ... }, { | |
| // 这两个和 Vue2 一样，没啥说的 | |
| immediate: true, | |
| deep: true, | |
| // 回调函数的执行时机，默认在组件更新之前调用。更新后调用改成post | |
| flush: 'pre', // 默认值是 pre，可改成 post 或 sync | |
| // 下面两个是调试用的 | |
| onTrack (e) { debugger } | |
| onTrigger (e) { debugger } | |
| }) | |
| </script> | |
| ``` | |
| ### computed | |
| computed 不再是一个对象，而是一个函数，用法其实基本差不多，函数第一个参数是侦听器源，用于返回计算的新值，也支持对象写法，第二个参数可用于调试 | |
| ```javascript | |
| <script setup> | |
| import { computed } from 'vue' | |
| const props = defineProps(['visible', 'type']) | |
| const emit = defineEmits(["myClick"]) | |
| // 函数写法，计算类型 | |
| const isFirst = computed(() => props.type === 1) | |
| // 对象写法 | |
| const status = computed({ | |
| get () { return props.visible }, // 相当于 Vue2中的 this.visible | |
| set (val) { emit('myClick', val) } // 相当于 Vue2中的 this.$emit('input', val) | |
| }) | |
| // computed 第二个参数也是一个对象，调试用的 | |
| const hehe = computed(参数一上面两种都可， { | |
| onTrack (e) { debugger } | |
| onTrigger (e) { debugger } | |
| }) | |
| </script> | |
| ``` | |
| ### mixins 和 hooks | |
| Vue3 中逻辑抽离复用的 hooks 语法，其实就是一个函数，可以传参，拿返回值来用。 | |
| =>封装 | |
| ```javascript | |
| // xxx.js | |
| expport const getData = () => {} | |
| export default function unInstance () { | |
| ... | |
| return {...} | |
| } | |
| // xxx.vue | |
| import unInstance, { getData } from 'xx.js' | |
| const { ... } = unInstance() | |
| onMounted(() => { | |
| getData() | |
| }) | |
| ``` | |
| ### 组件通信 | |
| ```javascript | |
| props + defineProps | |
| defineEmits | |
| defineExpose / ref | |
| useAttrs | |
| v-model(支持多个) | |
| provide / inject | |
| Vuex / Pinia | |
| ``` | |
| ### Pinia | |
| 1. 更加轻量级：相比 Vuex，Pinia 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念，如模块和 getter。 | |
| 2. 更加简单易用：Pinia 的 API 设计更加简单易用，因为它使用了 Vue.js 3 的新特性，如 Composition API。 | |
| 3. 更加灵活：Pinia 提供了更加灵活的状态管理方式，因为它支持多个 store 实例，而 Vuex 只支持一个 store 实例。 | |
| ### 样式穿透 | |
| ```javascript | |
| :deep(.el-form) { | |
| .el-form-item { ... } | |
| } | |
| CSS 绑定 JS 变量 | |
| ``` | |
| ```javascript | |
| 生命周期 | |
| props + defineProps | |
| defineEmits | |
| defineExpose / ref | |
| useAttrs | |
| v-model(支持多个) | |
| provide / inject | |
| vuex 4 | |
| nextTick... | |
| vite | |
| 原生 ES 模块导入方式，可以实现闪电般的冷服务器启动...... | |
| ``` | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment