Vue3：Vue3的新面孔

概述

在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
在学习Vue3之前，先了解它与Vue2相比带来了哪些改变是很有必要的，因为对比起来的学习相信会更加的深刻。

---

源码上的变化

1.采用TypeScript重写

• 在Vue2.x的时候，Vue使用Flow来进行类型检测；
• 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；

2.源码通过monrepo的形式来管理源代码：

• Mono：单个
• Repo：repository仓库
• 主要是讲许多项目的代码存储在同一个repository中；
• 这样做能让多个包相互独立，能有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
• 规划模块更加的清晰，可维护性、可扩展性更强；

---

性能上的变化

1.使用 Proxy 进行数据劫持

• 在Vue2.x的时候，使用的是Object.defineProperty来劫持数据的getter和setter方法，但是这种方式存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的
• 所以在Vue3.x开始，使用Proxy来实现数据劫持

2.删除了一些不必要的API

• 移除了实例上的$on、 $off 、 $once;
• 移除了一些特性：如filter、内联模板

3.编译上的优化
生成Block Tree、Slot编译优化、diff算法优化

---

API上的变化

1.由Options API 到 Composition API

• 在Vue2.x的时候，通过Options API来描述组件对象，存在的问题就是多个逻辑可能在不同的地方，比如created中会使用某一个method来修改data的数据，代码的内聚性非常差
• Compostion API可以将相关联的代码放在同一行进行处理，而不需要在对各Options之间寻找；

2.Hooks函数增加代码的复用性

• 在Vue2.x的时候，通过mixins在多个组件之间共享逻辑，但是有一个很大的缺陷就是mixins也是由一大堆Options组成，并且多个mixins会存在命名冲突的问题；
• 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到响应式。