vue2和vue3区别大吗（vue3和vue2的优缺点）



一、Vue3的优点

• 1、diff算法的提升

vue2中的虚拟DOM是全量的对比，也就是不管是写死的还是动态节点都会一层层比较，浪费时间在静态节点上。

vue3新增静态标记（patchflag ），与之前虚拟节点对比，只对比带有patch flag 的节点，可通过flag信息得知当前节点要对比的具体内容。

例如： 当代码中包含数据时，会标记为动态。

• 2、静态提升

vue2不管是否参与更新，都会重新创建再渲染。

vue3对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可。

• 3、事件侦听器缓存。
• 4、 ssr渲染
• 5、更好的ts支持
• 6、Composition Api

vue2的组件内部都是options api风格，也就是在data, methods, mounted等来组织代码，这样会让逻辑很分散，每次变动需要反复查找位置。

vue3中使用setup，逻辑都放到里边。

• 7、更先进的组件

vue2不允许template下写两个组件，vue3允许，将为我们创建一个虚拟的Fragment节点。

• 8、自定义渲染api

• 9、按需编译，体积比vue2更小
• 10.支持多根节点组件

二、响应式原理不同：

• vue2实现双向数据绑定原理，是通过ES5的Object.defineProperty,根据具体的key去读取和修改。其中的setter方法来实现数据劫持，getter实现数据修改。但是必须要先知道拦截和修改的key，所以vue2对于新增的属性无能为力，比如无法监听属性的新增和删除，数组索引和长度的变更，解决方法使用Vue.set(object, properName,value)等嵌套对象添加响应式。

• 在vue3中使用es5中得更快的proxy，替代了Object.defineProperty。proxy可以理解为在对象外加了一层拦截，任何人要访问该对象，都要通过这层拦截。且proxy直接对对象拦截而非属性，并返回一个对象，具有更好的响应式支持。

三、生命周期变化

初始化加载顺序：

=>  =>  =>  =>

vue3压缩后变快，很大程度是因为这些使用都需要引入了。

！！！ vue3中的核心api都支持了tree-shaking，这些api都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

四、mixins更改

在vue2 使用mixins来实现相同逻辑的抽离，每个组件只需要引入mixins，就能实现复用。

创建js文件，写入

使用方法：

引入js文件，写入mixins：[ ]

缺点：mixins的声明周期会和引入mixins的组件的生命周期整合在一起。且minxins的生命周期比组件调用快。组件的data，methods会覆盖同名data，methods。

1.变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。

2.多个mixins的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突。

3.mixins和组件可能出现多对多的关系，复杂度较高（即一个组件可以引用多个mixins，一个mixins也可以被多个组件引用）。

vue3中的改进：

自定义hook的作用类似vue2的mixin，封装可复用的功能函数。

五、父子传值的变化

在vue2中使用props传值。

在vue3中依旧使用，但是传值写法有所变化。

vue3 父组件

子组件

context:

包含 , ,  等数据方法：

• ：获取组件上的属性
• ：获取 slot 插槽的节点
• ：emit 方法（子组件向父组件传递数据）

setup 函数是 Vue3 中新增的一个生命周期函数，会在  之前调用。因为此时组件的  和  还没有初始化，因此在 setup 中是不能使用  的。所以 Vue 为了避免我们错误的使用，它直接将 setup 函数中的  修改成了。并且，我们只能同步使用setup函数，不能用async将其设为异步。

setup 函数接收两个参数 和 ， 语法为：

里面包含父组件传递给子组件的所有数据。在子组件中使用  进行接收。

是响应式的， 当传入新的  时，会及时被更新。
由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。可以使用toRefs

provide,inject 父组件向子组件传递方法和数据

api均从vue中引入。

在父组件直接provide（‘别名’，变量或方法）；

在子组件直接inject（‘别名’）

六、碎片化节点

在vue2中，template下只允许存在一个根节点，在vue3中可以有多个跟结点。

参考文章：

https://www.cnblogs.com/bingcola/p/15210566.html

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/24947.html