vue2与vue3生命周期钩子的不同

Vue 2 的生命周期钩子
在 Vue 2 中,常用的生命周期钩子包括:

created:在实例创建完成后被调用。这时,实例已完成数据观测 (data observer),属性和方法的运算,watch/event 事件回调。但是,挂载阶段还没开始,$el 属性目前不可见。
mounted:在挂载完成后被调用。这时,组件已经插入到 DOM 中,可以访问到 $el 属性。
beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:在实例销毁后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。
Vue 3 的生命周期钩子
Vue 3 引入了一些新的命名,并且在组合式 API (setup 函数) 中使用了不同的钩子函数:

onBeforeMount:在挂载开始之前被调用。
onMounted:在挂载完成后被调用。
onBeforeUnmount:在卸载组件实例之前调用。
onUnmounted:在卸载组件实例之后调用。
具体差异
created vs onMounted:

Vue 2:created 钩子在实例创建完成后被调用,但此时组件还没有被挂载到 DOM 上。
Vue 3:onMounted 钩子在组件挂载完成后被调用,此时组件已经被插入到 DOM 中。
beforeDestroy vs onBeforeUnmount:

Vue 2:beforeDestroy 在组件即将被销毁前调用。
Vue 3:onBeforeUnmount 在组件即将被卸载前调用。
destroyed vs onUnmounted:

Vue 2:destroyed 在组件被销毁后调用。
Vue 3:onUnmounted 在组件被卸载后调用。

Vue 2Vue 3生命周期钩子函数有一些共同点,但也存在一些差异。以下是Vue 2Vue 3的主要生命周期阶段以及对应的钩子函数: **Vue 2 生命周期钩子函数:** 1. **创建前 (beforeCreate)** - `beforeCreate`:实例刚被创建但还未挂载到DOM上。 2. **创建完成 (created)** - `created`:组件已完全创建,并且数据已经初始化完毕。 3. **挂载前 (mounted)** - `mounted`:组件已挂载到DOM上并已插入,此时可以操作DOM元素了。 4. **更新 (updated)** - `data`变化会触发`updated`,但是不会触发`render`。 5. **渲染之前 (beforeUpdate)** - 新的`VNode`准备渲染时调用,但数据还没改变。 6. **渲染完成 (rendered)** - 数据发生变化后的每次更新都会先调用`render`,然后触发`updated`。 7. **卸载 (beforeDestroy)** - 组件即将销毁但仍存在于DOM中,可以在此做清理工作。 8. **销毁 (destroyed)** - 组件已被移除并从DOM中卸载。 **Vue 3 生命周期钩子函数的变化:** Vue 3 引入了一些新的生命周期钩子和改进: 1. **setup()**: 这是单文件组件(SFC)的新特性,它取代了部分旧钩子,如`created`、`beforeDestroy`等,用于执行组件的初始化逻辑。 2. **onBeforeMount(), onMounted(), onBeforeUnmount()**: 分别对应于`beforeCreate`, `created`, `beforeDestroy`,但更清晰地表示特定状态。 3. **不再推荐使用$watch**: 在Vue 3中,建议使用`reactive`或自定义`computed`代替。 4. **响应式系统优化**: Vue 3引入了更强大的响应式系统,使得数据更改的检测更为高效。 **相关问题--:** 1. Vue 3 中的 setup 函数是如何工作的? 2.Vue 3中为什么要弃用 $watch? 3. Vue 2Vue 3生命周期管理上有哪些主要区别?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值