下载掌阅APP，畅读海量书库
立即打开
Vue.js 3.x并没有延用Vue.js 2.x版本的代码，而是从头重写了整个框架，代码采用TypeScript进行编写，新版本的API全部采用普通函数，在编写代码时可以享受完整的性能推断。
与Vue.js 2.x版本相比，Vue.js 3.x具有以下新变化。
Vue.js 2.x利用Object.defineProperty（）方法侦查对象的属性变化，该方法有一定的缺点：
（1）性能较差。
（2）在对象上新增的属性是无法被侦测到的。
（3）改变数组的length属性是无法被侦测到的。
Vue.js 3.x重构了响应式系统，使用Proxy替换Object.defineProperty。Proxy被称为代理，它的优势如下：
（1）性能更优异。
（2）可直接监听数组类型的数据变化。
（3）监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升。
（4）Proxy可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行。
Vue.js 3.x重写了虚拟DOM的实现，并优化了编译模板，提升了组件的初始化速度，性能提升了1.3～2倍，服务器端的渲染速度提升了2～3倍。
Vue.js 3.x只打包真正需要的模块，删除无用的模块，从而减小了产品发布版本的大小。而在Vue.js 2.x中，很多用不到的模块也会被打包进来。
Vue.js 3.x引入了基于函数的组合API。在引入新的API之前，Vue.js还有其他替代方案，它们提供了诸如Mixin、HOC（高阶组件）、作用域插槽之类的组件之间的可复用性，但是所有方法都有其自身的缺点，因此它们未被广泛使用。
（1）一旦应用程序包含一定数量的Mixins，就很难维护。开发人员需要访问每个Mixin，以查看数据来自哪个Mixin。
（2）HOC模式不适用于.vue单文件组件，因此在Vue开发人员中不被广泛推荐或使用。
（3）作用域插槽的内容会被封装到组件中，但是开发人员最终拥有许多不可复用的内容，并在组件模板中放置了越来越多的插槽，导致数据来源不明确。
组合API的优势如下：
（1）由于API是基于函数的，因此可以有效地组织和编写可重用的代码。
（2）将共享逻辑分离为功能来提高代码的可读性。
（3）可以实现代码分离。
（4）在Vue.js应用程序中可以更好地使用TypeScript。
Teleport（传送）是一种能够将模板移动到DOM中的Vue应用程序之外的其他位置的技术。像modals和toast等元素，如果嵌套在Vue的某个组件内部，那么处理嵌套组件的定位、z-index样式就会变得很困难。很多情况下，需要将它与Vue.js应用的DOM完全剥离，管理起来会容易很多，此时就需要用到Teleport。
在Vue 2.x中，每个组件必须有一个唯一的根节点，所以，写每个组件模板时都要套一个父元素。
在Vue 3.x中，为了更方便地书写组件模板，新增了标签元素<Fragment></Fragment>，从而不再限于模板中的单个根节点，组件可以拥有多个节点。这样做的好处在于，减少了标签层级，减小了内存占用。
Vue.js 3.x是用TypeScript编写的库，可以享受自动的类型定义提示。JavaScript和TypeScript中的API相同，从而无须担心兼容性问题。结合使用支持Vue.js 3.x的TypeScript插件，开发更加高效，还可以拥有类型检查、自动补全等功能。