vue的生命周期有哪些:分阶段执行,适配开发场景

vue的生命周期包含创建、挂载、更新、销毁四大核心阶段,共分为初始化、DOM挂载、数据更新、实例销毁对应的完整钩子函数,所有钩子函数均遵循Vue官方2.x版本规范,能让你精准把控组件从创建到销毁的每一步执行时机,适配组件初始化赋值、DOM操作、数据监听、资源释放等前端常规开发场景,该生命周期体系仅适用于Vue2框架,Vue3组合式API生命周期逻辑存在一定差异,不可直接通用。

vue的生命周期创建阶段

创建阶段是组件实例诞生但未生成DOM的阶段,包含beforeCreate和created两个钩子。beforeCreate在组件实例刚初始化、数据观测和事件机制未搭建完成时触发,此时你无法读取data数据、调用methods方法,几乎不用于业务开发。created在实例创建完成后触发,data、methods已完全初始化,DOM尚未生成,网络请求、初始化数据赋值的基础操作都可以放在这个钩子中执行。

创建阶段无DOM渲染操作。

vue的生命周期挂载阶段

挂载阶段负责将组件虚拟DOM渲染为真实DOM并挂载到页面,包含beforeMount和mounted两个核心钩子。beforeMount在DOM挂载前最后一次编译模板后触发,页面仍未渲染真实DOM,此时修改数据不会触发额外的更新流程。mounted是挂载完成后的核心钩子,真实DOM已成功渲染并挂载到页面,你可以在这里执行DOM节点获取、DOM操作、第三方DOM插件初始化等操作,是开发中使用频率极高的生命周期钩子。

vue的生命周期更新阶段

更新阶段在组件响应数据变化、重新渲染DOM时触发,包含beforeUpdate和updated两个钩子。beforeUpdate在数据更新后、DOM重新渲染前触发,此时页面DOM未更新,你可以获取更新前的DOM状态,用于对比新旧DOM数据差异。updated在DOM重新渲染和更新完成后触发,页面已展示最新数据,可执行更新后的DOM二次操作,但频繁在该钩子修改数据容易造成组件循环更新,开发中需控制使用频次。

vue的生命周期销毁阶段

销毁阶段在组件卸载、实例销毁前和销毁后触发,包含beforeDestroy和destroyed两个钩子。beforeDestroy在组件销毁流程启动前触发,组件实例仍可正常访问,数据、方法、DOM仍存在,适合清除定时器、解绑全局事件、终止未完成的网络请求,有效避免内存泄漏。destroyed在组件实例完全销毁后触发,所有数据、事件监听、DOM绑定均已失效,仅可用于极少的收尾日志记录操作,无实际业务操作价值。

vue2与vue3生命周期核心差异对比

对比维度Vue2选项式APIVue3组合式API
创建钩子beforeCreate、createdsetup替代对应阶段,无单独钩子
挂载钩子beforeMount、mountedonBeforeMount、onMounted
更新钩子beforeUpdate、updatedonBeforeUpdate、onUpdated
销毁钩子beforeDestroy、destroyedonBeforeUnmount、onUnmounted

Vue3保留了选项式API的生命周期钩子写法,同时新增组合式API钩子,大多数新项目优先使用组合式API钩子,逻辑聚合性更强。

activated和deactivated是vue专属的缓存生命周期钩子,适配keep-alive缓存组件场景。

activated在被缓存的组件重新激活、进入页面时触发,deactivated在缓存组件离开页面、失活时触发,普通无缓存组件不会执行这两个钩子,常用来解决缓存组件数据不刷新的开发问题。

敬慕百科汇集百科知识与游戏文化,带你发现世界的每一个精彩角落。

想要了解更多关于vue的生命周期有哪些的文章欢迎访问:百科