vue2.0和vue3.0的区别

最新推荐文章于 2024-09-16 22:50:32 发布

我爱学习yq

最新推荐文章于 2024-09-16 22:50:32 发布

阅读量126

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74801194/article/details/131493350

版权

Vue3引入了CompositionAPI，替代了Vue2的OptionsAPI。双向数据绑定原理由Object.defineProperty改为新的实现。Vue3支持Fragments，组件可有多个根节点。生命周期钩子也发生了变化，如beforeCreate和created被setup()取代。

摘要由CSDN通过智能技术生成

一、Composition API
这是vue2.x和vue3.x之间最大的区别。Vue2使用选项类型API（Options API）相比之下，Vue3使用合成型API（Composition API）。

二、vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

三、Vue3支持碎片(Fragments)
就是说在组件可以拥有多个根节点。

四、建立数据
Vue2 - 这里把数据放入data属性中。
在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

五、生命周期钩子不同

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated