谈谈你对 Vue 生命周期的理解?以及生命周期的执行顺序

600 阅读1分钟
  • 生命周期的理解

  • 生命周期钩子函数执行顺序

一、谈谈你对 Vue 生命周期的理解

生命周期描述
beforeCreate组件实例被创建之初,组件的属性生效之前
created组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用
beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用
mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
组件数据更新之前调用,发生在虚拟 DOM 打补丁之前组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update组件数据更新之后
activitedkeep-alive 专属,组件被激活时调用
deadctivatedkeep-alive 专属,组件被销毁时调用
beforeDestory组件销毁前调用
destoryed组件销毁后调用

二、谈谈你对 Vue 生命周期的理解

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

  • 加载渲染过程

    父beforeCreate -> 父created -> 父beforeMount -> 子beforCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
  • 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程

父 beforeUpdate -> 父 updated

  • 销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed