Vue3的优化总结_vue3 proxy如何处理数据变化

1. 数据劫持优化

vvue2.x通过 Object.defineProperty 去劫持数据的getter和setter
缺陷：

1. 必须预先知道要拦截的key，所以不能检测对象属性的添加和删除
2. 要劫持内部深层次的对象变化需要递归遍历这个对象，有性能负担

vue3.x使用 Proxy 做数据劫持，Proxy可以劫持整个对象或数组的变化，不用无脑递归遍历，这种处理方式很大程度提升了性能

2. 编译优化

vue2:

1. 单个组件内部需要遍历改组件整个vnode
2. diff和遍历vnode的性能跟模版大小相关，跟动态节点数量无关

vue3:

1. 通过编译阶段对静态模版的分析，生成Block tree
2. Block tree 是将模版基于动态节点指令切割的区块
3. 每个区块的节点结构是固定的，只需要以一个 Array 来追踪自身包含的动态节点
4. diff的时候只需要对比动态节点内容
5. vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关

3.语法 API 优化：Composition API

vue2:
采用Options API 的设计 data props methods computed 等不同的属性分类。大型组件中，一个组件可能有很多个逻辑点，当需要修改一个功能时就要文件中上下切换和寻找

vue3
采用Composition API的设计 将某个逻辑点相关的代码全部放在一起，这样当需要修改一个功能时就不需要在文件中上下切换和寻找

源码体积优化

1. 移除了冷门的feature（比如 fliter inline-template等）
2. 引入了tree-shaking的技术，减少打包体积。体积更小，网络传输时间更短，js引擎解析包速度就越快。