Vue2.0和Vue3.0有什么区别

本文比较了Vue2中利用Object.defineProperty和发布订阅模式实现的双向数据绑定,以及Vue3中ProxyAPI的应用。同时详细介绍了Vue2和Vue3的生命周期变化,特别是新添加的Vue3钩子函数对开发者的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控

Vue 2.0 的生命周期:
beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置 (event/watcher option) 之前被调用。
created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer)、属性和方法的运算、watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前尚不可用。
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:实例挂载完成后调用,这时 el 被新创建的 vm.$el 替换了。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有DOM,如移除手动设置的class。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
activated:在组件章节中深入讨论过,这里不做详细讲解。
deactivated:在组件章节中深入讨论过,这里不做详细讲解。
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:实例销毁后调用。这时候,绑定在实例上的全部指令、事件监听器都会被移除,所有子实例也会被销毁。
Vue 3.0 的生命周期:
onBeforeMount:在挂载之前被调用,与 Vue 2.0 中的 beforeMount 类似。
onMounted:在挂载之后被调用,与 Vue 2.0 中的 mounted 类似。
onBeforeUpdate:在更新之前被调用,与 Vue 2.0 中的 beforeUpdate 类似。
onUpdated:在更新之后被调用,与 Vue 2.0 中的 updated 类似。
onBeforeUnmount:在卸载之前被调用,与 Vue 2.0 中的 beforeDestroy 类似。
onUnmounted:在卸载之后被调用,与 Vue 2.0 中的 destroyed 类似。
可以看到,Vue 3.0 对生命周期进行了一些小的调整,并不影响使用,而且增加了一些新的钩子函数,极大的方便使用者进行开发和维护。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值