Vue3知识汇总

目录

 一、常用的composition API

 1、简介setup——尽量不要与vue2混合用，因为vue3不能访问vue2中配置项

  2、ref函数——能定义基本数据类型，也能对象类型（内部借助reactive）​编辑

 3、reactive函数——只能定义对象类型数据（对象或者数组）

 4、Vue3中的响应式原理与实现——Proxy代理+Reflect操作源对象内部数据

 6、setup的两个注意点​编辑

 7、Vue3中的computed计算属性的使用方法

  8、Vue2中的watch监听的使用方法——只要sum变了，下边就执行console.log

   9、Vue3中的watch监听的使用方法——只要person变了，下边就执行console.log

 10、Vue3中新增的watchEffect函数——监视回调中用了哪个属性，就监视哪个属性

  11、Vue3中新增的hook函数——复用代码，逻辑更清晰

 12、toref和torefs——解构赋值，且具有响应式

 二、其他compositionAPI

1、shallowReactive与shallowRef——响应式优化用的

2、readonly——让响应式数据变为只读（深只读）与shallowReadonly——让响应式变为只读（浅只读）——用在不希望被修改时

 3、toRaw——由reactive生成的响应式对象转为普通对象。markRaw——标记一个对象，永远不会成为响应式对象​编辑

4、customRef——自定义ref,可以延迟响应式或者其他操作

 5、provide与inject——实现祖孙通信(需要 import  {inject} from 'Vue')​编辑

 6、响应式数据的判断isRef(a)——检查是ref的还是reactive的还是只是只读的

 三、CompositionAPI的优势

 1、Options API存在的问题——data、methods、computed​编辑

 2、Composition API的优势——借助hook函数，让代码更有序

 四、Vue3新的组件

1、Fragment内置组件——vue3可以有多个根，内部会将多个标签包含在Fragment虚拟元素中

 2、Teleport内置组件——瞬移（用teleport标签包起来，且加上to="body"就可以移动到指定位置）

3、Suspense内置组件——优化（用suspense标签包起来，异步加载，等待时间显示指定内容）

五、其他

1、全部Api转移——比如Vue.config.......变成了app.config........

 2、其他改变——data必须为函数，移除了过滤等等​编辑

 一、常用的composition API

 1、简介setup——尽量不要与vue2混合用，因为vue3不能访问vue2中配置项

  2、ref函数——能定义基本数据类型，也能对象类型（内部借助reactive）

 3、reactive函数——只能定义对象类型数据（对象或者数组）

 

 

 4、Vue3中的响应式原理与实现——Proxy代理+Reflect操作源对象内部数据

模拟Vue3响应式基础版

 模拟Vue3响应式真正版——proxy代理对象 + reflect反射对象

 6、setup的两个注意点

 7、Vue3中的computed计算属性的使用方法

  8、Vue2中的watch监听的使用方法——只要sum变了，下边就执行console.log

   9、Vue3中的watch监听的使用方法——只要person变了，下边就执行console.log

 

 Vue3监听需要注意的地方（是否加.value）

 

 10、Vue3中新增的watchEffect函数——监视回调中用了哪个属性，就监视哪个属性

  11、Vue3中新增的hook函数——复用代码，逻辑更清晰

举例子------hook.js提取出来的公共功能

 用到以上公共功能的组件如何引入

 12、toref和torefs——解构赋值，且具有响应式

 二、其他compositionAPI

1、shallowReactive与shallowRef——响应式优化用的

 注：这两个可以做优化使用

2、readonly——让响应式数据变为只读（深只读）与shallowReadonly——让响应式变为只读（浅只读）——用在不希望被修改时

 代码举例子

 3、toRaw——由reactive生成的响应式对象转为普通对象。markRaw——标记一个对象，永远不会成为响应式对象

 注：raw是原始的意思

4、customRef——自定义ref,可以延迟响应式或者其他操作

 举例子

 5、provide与inject——实现祖孙通信(需要 import  {inject} from 'Vue')

 注:需要 import  {inject} from 'Vue'

 6、响应式数据的判断isRef(a)——检查是ref的还是reactive的还是只是只读的

 举例子

 三、CompositionAPI的优势

 1、Options API存在的问题——data、methods、computed

 2、Composition API的优势——借助hook函数，让代码更有序

 四、Vue3新的组件

1、Fragment内置组件——vue3可以有多个根，内部会将多个标签包含在Fragment虚拟元素中

 2、Teleport内置组件——瞬移（用teleport标签包起来，且加上to="body"就可以移动到指定位置）

 注：瞬移组件，指定放的位置，不影响其他组件的样式，比如屏幕居中的弹框

3、Suspense内置组件——优化（用suspense标签包起来，异步加载，等待时间显示指定内容）

 注：作用，异步引入组件时候给一个等待提示，用于优化

五、其他

1、全部Api转移——比如Vue.config.......变成了app.config........

 

 2、其他改变——data必须为函数，移除了过滤等等