vue3相对vue2做了哪些优化？

vue3做了哪些优化？

1. 更小
2. 更快
3. TypeScript支持
4. api设计一致性
5. 提高自身可维护性
6. 开放更多底层功能

更小

• 移除了一些不常用的api（ $on,$off, $once,$children）。
• 引入了 tree-shaking 把无用的去掉，仅打包需要的，然后打包的整体体积变小

tree-shaking 的特性

Tree-shaking 是基于 ES6 模板语法（import 与 exportes），主要是借助 ES6 模块的静态编译思想，在编译时候就能确定模块的依赖关系，以及输入和输出的变量。

Tree-shaking 做了两件事情：

• 编辑阶段利用ES6 Module 判断哪些模块已经加载
• 判断哪些模块和变量未被使用或者引用，进而删除对应代码

更快

1. diff算法优化

   vue3内新增了静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找到地方进行比较。

2. 静态提升

   vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。 这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复创建操作，优化了运行时候的内存占用

3. 事件监听缓存

在未开启事件监听缓存的情况下，我们看到这串代码编译后被静态标记为8，之前讲到被静态标记的标签就会被拉去做比较，而静态标记 8 对应的是 “动态属性，不包含类名和样式”。 4. SSR优化

更友好

vue3在兼顾vue2的option API的同时还推出了composition API，大大增加了代码的逻辑组织和带饭复用能力。

composition api 与 options api 进行两大方面的比较

• 逻辑组织
• 逻辑复用

响应式系统

vue2 中采用defineProperty 来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter 和setter，实现响应式。

vue3采用proxy 重写了响应式系统，因为proxy 可以对整个对象进行监听，所以不需要深度遍历

• 可以监听动态属性的添加
• 可以监听到数组的索引和数组length属性
• 可以监听删除属性

object.defineProperty只能遍历对象属性进行劫持， Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应目的。