1.5　Vue.js 3.x的新变化

Vue.js 3.x并没有延用Vue.js 2.x版本的代码，而是从头重写了整个框架，代码采用TypeScript进行编写，新版本的API全部采用普通函数，在编写代码时可以享受完整的性能推断。

与Vue.js 2.x版本相比，Vue.js 3.x具有以下新变化。

1．重构响应式系统

Vue.js 2.x利用Object.defineProperty()方法侦查对象的属性变化，该方法有一定的缺点：

（1）性能较差。

（2）在对象上新增属性是无法被侦测的。

（3）改变数组的length属性是无法被侦测的。

Vue.js 3.x重构了响应式系统，使用Proxy替换Object.defineProperty。Proxy被称为代理，它的Proxy优势如下：

（1）性能更优异。

（2）可直接监听数组类型的数据变化。

（3）监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升。

（4）Proxy可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行。

2．更好的性能

Vue.js 3.x重写了虚拟DOM的实现，并优化了编译模板，提升了组件的初始化速度，更新的性能提升了1.3~2倍，服务器端渲染速度提升了2~3倍。

3．tree-shaking支持

Vue.js 3.x只打包真正需要的模块，删除了无用的模块，从而减小了产品发布版本的大小。而在Vue.js 2.x中，很多用不到的模块也会被打包进来。

4．组合API

Vue.js 3.x中引入了基于函数的组合API。在引入新的API之前，Vue还有其他替代方案，它们提供了诸如Mixin、HOC（高阶组件）、作用域插槽之类的组件之间的可复用性，但是所有方法都有自身的缺点，因此它们未被广泛使用。

（1）一旦应用程序包含一定数量的Mixins，就很难维护。开发人员需要访问每个Mixin，以查看数据来自哪个Mixin。

（2）HOC模式不适用于.vue单文件组件，因此在Vue开发人员中不被广泛推荐或使用。

（3）作用域插槽的内容会封装到组件中，但是开发人员最终拥有许多不可复用的内容，并在组件模板中放置了越来越多的插槽，导致数据来源不明确。

组合API的优势如下：

（1）由于API是基于函数的，因此可以有效地组织和编写可重用的代码。

（2）将共享逻辑分离为功能来提高代码的可读性。

（3）可以实现代码分离。

（4）在Vue应用程序中更好地使用TypeScript。

5．Teleport（传送）

Teleport是一种能够将模板移动到DOM中Vue应用程序之外的其他位置的技术。像modals和toast等元素，如果嵌套在Vue的某个组件内部，那么处理嵌套组件的定位、z-index样式就会变得很困难。很多情况下，需要将它与Vue应用的DOM完全剥离，这样管理起来会容易很多，此时就需要用到Teleport。

6．Fragment（碎片化节点）

在Vue 2.x中，每个组件必须有一个唯一的根节点，所以，写每个组件模板时都要套一个父元素。在Vue 3.x中，新增了标签元素<Fragment></Fragment>，从而不再限于模板中的单个根节点，组件可以拥有多个节点。这样做可以减少标签层级，减小内存占用。

7．更好的TypeScript支持

Vue.js 3.x是用TypeScript编写的库，可以享受自动的类型定义提示。JavaScript和TypeScript中的API相同，从而无须担心兼容性问题。结合使用支持Vue.js 3.x的TypeScript插件，开发更加高效，还可以拥有类型检查、自动补全等功能。