1.5　Vue.js 3.0的新变化

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

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

1．重构响应式系统

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

（1）性能较差。

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

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

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

（1）性能更优异。

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

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

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

2．更好的性能

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

3．tree-shaking支持

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

4．组合API

Vue 3.0中引入的基于函数的组合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文件必须有一个唯一的根节点，Vue 3.0将不再限于模板中的单个根节点，可以有多个节点。

7．更好的TypeScript支持

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