Vue3.0 API的使用

### Vue3.0 整体优势 1. proxy数据劫持代替object.defineProperty(特点：可以监听数组变化，可以直接修改对象属性等)； 2. Composition API，更好的逻辑复用和代码组织； 3. 优化VirtualDom,使其编译更快，体积更小； 4. 更好的TypeScript支持，不再需要借助装饰器； ### Vue3.0 注意事项 1. vue3.0页面中用到的API都需要手动引入 2. 所有的逻辑代码都要写在setup方法中 3. template中用到的变量和方法必须return出去才可以访问 4. 书写TS将script标签属性lang="ts"即可 ### Vue3.0 生命周期变化 - `注意：所有生命周期API需要从vue按需引入，并且要在setup函数中调用：onMounted(()=>{...codeing })` - beforeCreate `>>` setup - created `>>` setup - beforeMount `>>` onBeforeMount - mounted `>>` onMounted - beforeUpdate `>>` onBeforeUpdate - updated `>>` onUpdated - beforeDestory `>>` onBeforeUnmount - destoryed `>>` onUnmounted ### Vue3.0 API的使用 #### 1. `组件的声明` - 普通组件：defineComponent - 异步组件：defineAsyncComponent ``` ``` #### 2. `组件的引入 和 props类型检测` ``` ``` #### 3. `defineProps 和 defineEmits` - 在 ` ``` #### 4. `setup` - 提示：在 setup() 函数中无法访问this - 执行时机：beforeCreate 之后 created之前 ``` ``` #### 5. `ref` - 作用：ref() 函数用来根据给定的值创建一个响应式的数据对象 - 返回：ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性 - 使用：.value 是在 setup 函数中访问 ref 包装后的对象时才需要加的，在 template 模板中访问时是不需要的，因为在编译时，会自动识别其是否为 ref 包装过的 - 注意：声明新的 ref 会覆盖旧的 ref ```

{{year}}

``` #### 6. `reactive` - 作用：用来创建一个响应式的数据对象 - 注意：创建的变量具有 **深层响应** 的效果，该API也很好地解决了Vue2通过 defineProperty 实现数据响应式的缺陷 - 使用建议：（有的同学可能会比较疑惑，ref 和 reactive 的使用有点像） - 1. 基本类型值（String 、Nmuber 、Boolean 等）或单值对象（类似像 {count: 3} 这样只有一个属性值的对象）使用 ref - 2. 引用类型值（Object 、Array）使用 reactive ``` ``` #### 7. `shallowReactive` - 作用：用来创建一个响应式的数据对象（**浅层响应**，外层被proxy包裹实现响应，内层不更新视图) - 场景：用作性能优化API，考虑到如果一个对象层级比较深，那么每一层都用 Proxy 包装后，对于性能是非常不友好的 ``` ``` #### 8. `isRef` - 作用：isRef() 用来判断某个值是否为 ref() 创建出来的对象 ``` ``` #### 9. `toRef` - 作用：toRef 是将某个对象中的某个值转化为响应式数据， - 参数：其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名 - 注意： - 1. ref 是对传入数据的拷贝；toRef 是对传入数据的引用 - 2. ref 的值改变会更新视图；toRef 的值改变不会更新视图 ``` ``` #### 10. `toRefs` - 作用：将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数 - toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象 - 只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据 ``` ``` #### 11. `shallowRef` - 作用：创建数据对象(**浅层监听**，只监听value实现响应) - 场景：一样是拿来做性能优化的 ``` ``` #### 12. `triggerRef` - 作用：驱动更新 ``` // 接着上个示例代码看 newmultistoreyobj.value.first.b = 8// 改变数据不触发更新 triggerRef(newmultistoreyobj)// 场景三： 调用triggerRef方法驱动更新 ``` #### 13. `toRaw` - 作用：用于获取 ref 或 reactive 对象的原始数据的 ``` ``` #### 14. `markRaw` - 作用：可以将原始数据标记为不可被追踪，即使用ref或reactive将其包装，仍无法实现数据响应式 - 参数：其接收一个参数，即原始数据，并返回被标记后的数据 ``` ``` #### 15. `computed` - 作用：计算API - 1. 只读 ``` ``` - 2. 可读可写 ``` ``` #### 16. `watch` - 注意：组件第一次创建的时候会触发一次，默认是渐层的监听我们指定的数据，需要深层配置deep:true - 参数：watch( source, cb, [options] ) - - source：可以是表达式或函数，用于指定监听的依赖对象 - - cb：依赖对象变化后执行的回调函数 - - options：可配置参数，可以配置的属性有 immediate（初始化立即触发回调函数）、deep（深度监听） - 几种使用场景： - 1. 指定要监视的数据源 ``` ``` - 2. 清除监视 - - `在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。` - - `如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可` ``` ``` - 3. 清除无效的异步任务 - - `有时候，当被 watch 监视的值发生变化时，或 watch 本身被 stop 之后，我们期望能够清除那些无效的异步任务，此时，watch 回调函数中提供了一个函数来执行清除的工作。这个清除函数会在如下情况下被调用：` - - - 1. watch被重复执行了 - - - 2. watch被强制stop了 ``` ``` #### 17. `watchEffect` - 作用：监听API - 它与 watch 的区别主要有以下几点： - - 不需要手动传入依赖 - - 每次初始化时会执行一次回调函数来自动获取依赖 - - 无法获取到原值，只能得到变化后的值 ``` ``` #### 18. `getCurrentInstance` - 作用：Vue3中无法访问this,可以用到getCurrentInstance方法访问实例对象 ``` ``` #### 19. `useStore` - 作用：Vue3中拿不到this，instance.ctx里也没有store，只能用vuex引出的useStore方法使用仓库 ``` ``` #### 20. `useRoute & useRouter` ``` ``` #### 21. `provide & inject` - 作用：provide() 和 inject() 可以实现嵌套组件之间的数据传递。 - 提示：这两个函数只能在 setup() 函数中使用。 - 使用：父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据。 ``` import {provide} from 'vue' // 父组件向下传递 const color = ref('orange') provide('themecolor',color) ``` ``` // 子组件接收变量 const resultcolor = inject('themecolor') ``` #### 22. `节点的引用 -- dom的引用` ```

h3的DOM引用

弹窗 ``` #### 23. `节点的引用 -- 组件的引用` ``` ``` #### 24. `nextTick` - 在 Vue 3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。因此，对于 ES 模块构建版本来说，全局 API 现在通过具名导出进行访问 - 通过这一更改，如果模块打包工具支持 tree-shaking，则 Vue 应用中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小 - 2.0写法 - this.nextTick(()=>{}) - 3.0写法 - nextTick(()=>{}) ### Vue3.0 CSS的使用 #### 1. `状态驱动的动态 CSS` ``` 状态驱动的动态 CSS ``` #### 2. `深度选择器` - 解释：处于 scoped 样式中的选择器如果想要做更“深度”的选择 - 注意：通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。 ```

``` #### 3. `插槽选择器` - 解释：默认情况下，作用域样式不会影响到 `` 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。 - 作用：使用 :slotted 伪类以确切地将插槽内容作为选择器的目标 ``` ``` #### 4. `全局选择器` - 解释：如果想让其中一个样式规则应用到全局，比起另外创建一个` ``` #### 5. `混合使用局部与全局样式` - 解释：你也可以在同一个组件中同时包含作用域样式和非作用域样式： - ` ``` #### 7. `自定义注入名称` - 你可以通过给 module attribute 一个值来自定义注入的类对象的 property 键 ``` ``` #### 8. `与组合式 API 一同使用` ``` ```