Vue2与Vue3的区别

Posted 2023-03-04 曾胖神父

Vue2与Vue3的区别

多根节点

Vue2在模板中不支持多根节点，而Vue3支持多根节点

生命周期

在Vue3的生命周期钩子函数名称比Vue2的生命周期钩子函数名称上多+“on”,功能上是类似的。另外就是Vue3在使用生命周期钩子的时候需要先引入。

异步组件(Suspense)

Vue3提供Suspense组件，允许程序在等待异步组件加载完成前渲染兜底的内容。如加载效果。具体来说就是异步组件Suspense包括两个命名插槽：default和fallback。异步组件Suspense确保加载完成异步内容时显示默认插槽，并将fallback插槽用作加载状态。

Teleport

Vue3提供Teleport组件可将部分DOM移动到Vue app之外的位置。比如项目中常见的Dialog弹窗

虚拟DOM

Vue3相比Vue2，虚拟DOM上增加patchFlag字段

打包优化

Tree-shaking:模块打包webpack，rollup等中的概念。主要作用是移除javascript上下文中未引用的代码。主要依赖于import和export语句，用来检测代码模块是否被导出，导入，且被JavaScript文件使用。
在Vue2中，全局API暴露在Vue实例上，即使未使用，也无法通过tree-shaking进行消除。
而在Vue3中针对全局和内部的API进行了重构，并考虑到tree-shaking的支持。因此，在Vue3中全局API现在只能作为ES模块构建的命名导出进行访问。
通过这一更改，只要模块绑定器支持tree-shaking的支持。则Vue3应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。

从API上来说Vue2与Vue3的区别

Vue2使用的是选项API(Options/ˈɑpʃənz/ API)格式，这种格式会导致对相同数据进行操作使用的代码会被分割到各个属性内，是很不利于代码的阅读的
Vue3采用函数式编程(Composition/ˌkɑːmpəˈzɪʃ(ə)n/ API)方式，打破了this的限制，能够更好的复用性，真正体现实现功能的高内聚低耦合，更利于代码的可扩展性和可维护性。
Vue3更友好的支持兼容TS。

从响应式原理上看

Vue2：

Vue2 响应式原理基础是 Object.defineProperty
Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。
在遇到一个对象的属性还是一个对象的情况下，需要递归监听，对性能影响比较大。
由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。
对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可以使用Vue.set(object,propertyName,value)或vm.$set方法向嵌套对象添加响应式属性。
Object.defineProperty,不具备监听数组的能力，需要重新定义数组的原型来达到响应式

Vue3：

Vue3响应式原理基础是Proxy/ˈprɑːksi/
基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除或多层嵌套数据结构的响应
Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定
不需要一次性遍历data的属性，可以显著提高性能
用Proxy和Object.defineProperty相比有什么优点？
使用Proxy能劫持整个对象，而Object.defineProperty只能劫持对象的属性;前者递归返回属性对应的值的代理即可实现响应式，后者需要深度遍历每个属性；后者对数组的操作很不友好。

从diff算法上看

Vue2是全量Diff，具体来说就是当数据发生变化，他就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。
Vue3是静态标记+非全量Diff,具体来说就是Vue3在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。之后在于上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。
Vue3使用最长递增子序列优化对比流程，可以最大程度的减少DOM的移动，达到最少的DOM操作