Vue生命周期
一、概念
Vue 实例有一个完整的生命周期。
也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲 染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期
二、各个阶段
beforeCreate | 组件实例被创建之初,组件的属性生效之前 |
created | 组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子【可多次调用】 |
beforeUpdate | 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前 |
updated | 组件数据更新之后 |
beforeDestory | 组件销毁前调用 |
destoryed | 组件销毁后调用 |
activited | keep-alive 专属,组件被激活时调用 |
deadctivated | keep-alive 专属,组件被销毁时调用 |
用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数
三、包含子组件的父组件从创建到销毁过程中,Vue子组件和父组件生命周期的执行顺序
-
父组件 beforeCreate
-
父组件 created
-
父组件 beforeMount |
-
子组件 beforeCreate
-
子组件 created
-
子组件 beforeMount
-
子组件 mounted |
-
父组件 mounted
(2)更新过程
-
父组件 beforeUpdate |
-
子组件 beforeUpdate
-
子组件 updated |
-
父组件 updated
(3)销毁过程
-
父组件 beforeDestroy
-
子组件 beforeDestroy |
-
子组件 destroyed
-
四、Vue3中生命周期有什么变化
setup() | 始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method |
onBeforeMount() | 组件挂载到节点上之前执行的函数 |
onMounted() : | : 组件挂载完成后执行的函数 |
onBeforeUpdate() | 组件更新之前执行的函数 |
onUpdated(): | 组件更新完成之后执行的函数 |
onBeforeUnmount() | 组件卸载之前执行的函数 |
onUnmounted(): | 组件卸载完成后执行的函数 |
onActivated() | 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行; |
onDeactivated() | 比如从 A 组件,切换到 B 组件,A 组件消失时执行; |
onErrorCaptured() | 当捕获一个来自子孙组件的异常时激活钩子函数。 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!