vue2和vue3的区别

vue2与vue3的区别说大不大，说小但总结上又很多，所以本次就挑重点进行讲解了

一、双向数据绑定原理不同

1.vue2的数据绑定原理

vue2的数据绑定主要利用的是ES5中的Object.definePropert()，也就是数据劫持来实现功能，在之前的文章中有具体介绍过

2.vue3的数据绑定原理

vue3的数据绑定则是通过ES6的Proxy对数据代理

3.总结

1).数据劫持只能劫持单个属性，所以相对vue3的数据代理会占用较多的内存

2).数据代理可直接监听数组

3).可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

二、碎片

vue3支持碎片，即有多个根标签；vue2不支持

三、生命周期(左侧为vue3 右侧为vue2)

setup 相当于 beforCreate created

onBeforeMount 相当于 beforeMount

onMounted 相当于 mounted

onBeforeUpdate 相当于 beforeUpdate

onUpdated 相当于 updated

onBeforeUnmount 相当于 beforeDestroy

onUnmount 相当于 destory

四、API不同

这里的API只的是

vue2使用的是选项式API(Options API);

vue3使用的是组合式API(Composition API)

区别：

1. 组合式 API 更适合于组织复杂组件逻辑，它可以更灵活地将相关代码分离到不同的函数中，而选项式 API 则是基于选项组织代码。

2. 组合式 API 可以更好地重用逻辑，将相关代码封装为函数后，可以在不同组件中进行复用，而选项式 API 则需要通过 mixin 或者 mixins 的方式进行逻辑重用。

3. 组合式 API 在多个生命周期钩子的使用上更加灵活，可以根据需要灵活选择引入对应的生命周期钩子，而选项式 API 则是基于固定的生命周期函数。