Vue3 的设计目标是什么？做了哪些优化？

设计目标

• 更快
• 更小
• 更友好

在 Vue2 遇到的问题：

1. 随着功能的增加，复杂组件的代码变得越来越难以维护。
2. 缺少一种比较「干净」的、在多组件之间提取和复用逻辑的机制。
3. 类型推断不够友好。
4. 打包（bundle）的时间太久了。

Vue3 经过三年的筹备，做了哪些事情？我们从结果反推：

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

更小

• Vue3 移除一些常用的 API。
• 引入 tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。

更快

主要体现在编译阶段：

• diff 算法优化
• 静态提升
• 事件监听缓存
• SSR 优化

更友好

• Vue3 在兼顾 Vue2 的 Option API 同时推出 Composition API，大大增加了「代码逻辑组织和代码复用能力」。
• 直接调用函数，不需要关注实现过程，开发效率大大提高。
• Vue3 是基于TypeScript 编写的，可以享受自动类型定义提示的便利。

优化方案

Vue3 从很多层面都做了优化，可以分成三个方面：

• 源码
• 性能
• 语法 API

源码

• 源码管理
• TypeScript

源码管理

• 一些 packages （比如 Reactivity 响应式库）是可以独立于 Vue 使用的，这样用户如果只想使用 Vue3 的响应式能力，可以单独依赖这个响应式库，而不是去依赖整个 Vue。

TypeScript

Vue3 是基于 TypeScript 编写的，提供了更好的类型检查，能支持复杂的类型推导。

性能

• 体积优化
• 编译优化
• 数据劫持优化

这里讲数据劫持：

Vue2：数据劫持是通过 Object.defineProperty，这个 API 有一些缺陷，并不能检测对象属性的添加和删除。

尽管 Vue 为了解决这个问题提供了 set 和 delete 实例方法，但是对用户来说，还是增加了心智负担。而且在面对嵌套层级比较深的情况下，就存在性能问题。

Vue3：是通过 Proxy 监听整个对象，那么对于删除还是监听当然可以监听到。

然而 Proxy 并不能监听到内部深层次的对象变化，Vue3 的解决办法是在 getter 中去递归响应式，这样的好处是真正访问到内部对象，才会变成响应式，而不是递归。

语法 API

当然说 Compostion API 的两大显著优化：

• 优化逻辑组织

相同功能的代码编写在一块，而不像 Options API 各个功能的代码混成一块。

• 优化逻辑复用

可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可。