Vue3 的提升相较于 Vue2 主要体现在4个方面：

• 源码优化
• 性能优化
• 编译优化
• 语法优化

接下来围绕这几点来简述 Vue3 的突出优势。

#源码优化

代码整体架构采用 monorepo 和 TypeScript 来管理和开发源码，它的目的是让代码更易于开发和维护

1. 相对于 Vue2.x 的源码组织方式，monorepo 把这些模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试这样使得模块拆分更细化，职责划分更明确，模块之前的依赖关系也更加明确。

2. package（比如 reactivity 响应式库）是可以独立于 Vue.js 使用的，这样用户如果只想使用 Vue3 的响应式能力，可单独依赖这个响应式库而不用去依赖整个 Vue.js 减小了引用包的体积大小，而 Vue2 是做不到这点的。

3. 使用 TypeScript 避免时候 Type 类型出现的 Bug，相较于 Vue2.x 使用的 Flow.js，Ts 能够提供更好的类型推导能力。

#性能优化

1. 移除冷门 Feature，比如：filter、inline-template 等。

2. 引入 tree-shaking 技术：依赖 ES2015 模块语法的静态结构（即 import 和 export）通过编译阶段的静态分析，找到没有引入的模块并打上标记。

3. 数据劫持优化：舍弃 ObjectDefineProperty，使用 Proxy。
   ObjectDefineProperty 本身存在两点问题：

   • 无法拦截数组索引新增和对象属性新增value
   • 对于深层级的对象结构，要对底部的属性进行劫持就需要采取深度递归的方式把每一层的数据都定义成响应式数据，如果数据过于复杂，那么就有相当大性能负担

   Proxy 的优势

   它只会劫持整个对象，注意的是，Proxy API 并不能监听到内部深层次的对象变化，因此 Vue3 的处理方式是 在 getter 中去递归响应式，这样的好处是真正访问到内部对象才会变成响应式，而不是无脑递归，这样无疑也在很大程度上提升了性能。

#编译优化

1. patch 优化，在 Vue2 中所以一个组件一旦有了动态节点变动，那么就会 patch 整个组件树，理想状态下只需遍历绑定动态节点的 Vnode 就可以。Vue3 可以通过编译阶段对静态模版的分析，编译生成了Block tree。Block tree 是将一个模块基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的每个区块只需以一个 Array 来追踪自身包含的动态节点，借助 Block tree，将 vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关

2. slot编译优化

3. 事件侦听函数的缓存优化

4. 在运行时重写了 diff 算法

#语法优化

1. 新增 Composition API

Vue2 的 OptionsAPI，当组件小的时候，这种分类方式一目了然，但在大型组件中，一个组件可能有多个逻辑关注点，但使用 Optiopns API 的时候，每一个关注点都有自己的 Options，如果需要修改一个逻辑关注点，就需要在单个文件中不断上下切换和寻找，开发的体验不会很好。Vue3 主要是提供了 Composition API，解决了这个问题，它将某个逻辑关注点相关的代码全部放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中“上下横跳”了。

2. mixin 命名冲突和数据来源不清晰，Composition API 也帮我们解决了我们的问题。

3. 更好的类型支持，在调用函数时，所有的类型就被推导出来了，不像 OptionsAPI 所有东西都使用 this。

4. Compostion API 对 tree-shaking 更友好，代码也更容易压缩。