vue3

vue3和vue2的区别

• 双向数据绑定的原理不同
• 是否支持碎片
• API不同
• 定义数据变量方法不同
• 生命周期的不同
• 传值不同
• 指令和插槽不同
• main.js不同

vue3的性能为什么比vue2好？

• diff算法的优化
• 静态提升
• 事件侦听缓存

vue3为什么使用Proxy

• proxy可以代理整个对象，defineProperty只代理对象上的某个属性
• proxy对代理对象的监听更加丰富
• proxy代理对象会生成新的对象，不会修改被代理对象本身
• proxy补兼容ie浏览器

reactive+解构

用es6解构reactive对象得到的是原始值的副本，脱离了响应式系统，因此后续修改不会触发视图更新。Vue3的Proxy只能拦截对对象属性的访问和修改，结构时是浅拷贝、而不是引用拷贝。

• 不要解构，直接使用响应式对象属性
• toRefs转成ref对象
• 用ref，而不是reactive

数组更新

可以用a[1] = 999，但是为什么还推荐使用a.splice(1, 1, 999)

• vue2迁移项目，vue2中不能通过索引更新
• splice 是原子操作，Vue 可以更好地批量收集依赖和触发更新