Vue3知识汇总

1. 比较Vue2与Vue3的响应式

vue2的响应式原理

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

Object.defineProperty(data, 'count', {
   get () {}, 
   set () {}
})

Vue2响应式存在的问题

1. 对象直接新添加的属性或删除已有属性, 界面不会自动更新
2. 直接通过下标替换元素或更新length, 界面不会自动更新 例如：arr[1] = {}

vue3的响应式原理

通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等，通过Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

    const user = {
      name: '追风的栗子',
      age: 20,
      wife: {
        name: '小栗子',
        age: 19
      }
    }
    const proxyUser = new Proxy(user, {
      get(target, prop) {
        return Reflect.get(target, prop)
      },
      set(target, prop, val) {
        return Reflect.set(target, prop, val)
      },
      deleteProperty(target, prop) {
        return Reflect.deleteProperty(target,prop)
      }
    })

2. setup细节

1. setup执行的时机:在beforeCreate之前执行(一次), 此时组件对象还没有创建,this是undefined
2. setup的返回值:一般都返回一个对象(为模板提供数据)
3. setup的参数

//props: 包含props配置声明且传入了的所有属性的对象
//attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
//slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
//emit: 用来分发自定义事件的函数, 相当于 this.$emit
setup(props, context) {}
setup(props, {attrs, slots, emit}) {}

3. Vue3中v-if优先v-for解析

4. 将原来的全局API转移到应用对象

app.component()
app.config()
app.directive()
app.mount()
app.unmount()
app.use()

5. Vue3中新增的组件

• Fragment - 文档碎片
• Teleport - 瞬移组件的位置
• Suspense - 异步加载组件的loading界面

6. Vue3性能提示

• 使用Proxy代替defineProperty实现数据响应式
• 重新虚拟DOM的实现和Tree-Shaking
• Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中，就是比如你要用watch 就是import {watch} from 'vue' 其他的computed 没用到就不会给你打包减少体积