vue3史上最全的知识点

目录

常用的组合API（setup、ref、reactive）

比较Vue2与Vue3的响应式 

 Vue2

 Vue3

 计算属性与监视

 Vue3与Vue2的生命周期对比

---

常用的组合API（setup、ref、reactive）

1.setup 

• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2.ref 

• 作用: 定义一个数据的响应式
• 语法: const xxx = ref(initValue):
• 创建一个包含响应式数据的引用(reference)对象
• js中操作数据: xxx.value
• 模板中操作数据: 不需要.value
• 一般用来定义一个基本类型的响应式数据
   

3. reactive

•  作用: 定义多个数据的响应式
• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

比较Vue2与Vue3的响应式 

 Vue2

• 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
• 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

 Vue3

• 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等

 计算属性与监视

 computed函数

• 与computed配置功能一致
• 有getter和setter

watch函数 

• 与watch配置功能一致
• 只有getter
• 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
• 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
• 通过配置deep为true, 来指定深度监视

watchEffect函数 

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据
• 监视数据发生变化时回调

 Vue3与Vue2的生命周期对比

1. beforeCreate -> 使用 setup()
2. created -> 使用 setup()
3. beforeMount -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeDestroy -> onBeforeUnmount
8. destroyed -> onUnmounted