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子组件和父组件生命周期的执行顺序

(1)加载渲染过程:
  1. 父组件 beforeCreate

  2. 父组件 created

  3. 父组件 beforeMount |

  4. 子组件 beforeCreate

  5. 子组件 created

  6. 子组件 beforeMount

  7. 子组件 mounted |

  8. 父组件 mounted

(2)更新过程
  1. 父组件 beforeUpdate |

  2. 子组件 beforeUpdate

  3. 子组件 updated |

  4. 父组件 updated

(3)销毁过程
  1. 父组件 beforeDestroy

  2. 子组件 beforeDestroy |

  3. 子组件 destroyed

  4. 父组件 destoryed |

四、Vue3中生命周期有什么变化

setup() 始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
onBeforeMount() 组件挂载到节点上之前执行的函数
onMounted() : : 组件挂载完成后执行的函数
onBeforeUpdate() 组件更新之前执行的函数
onUpdated(): 组件更新完成之后执行的函数
onBeforeUnmount() 组件卸载之前执行的函数
onUnmounted(): 组件卸载完成后执行的函数
onActivated() 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行;
onDeactivated() 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
onErrorCaptured() 当捕获一个来自子孙组件的异常时激活钩子函数。
posted @   有只小菜猫  阅读(41)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示