Vue父子组件的生命周期

首先来介绍一下Vue的生命周期

Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染—>更新—>渲染、销毁等一系列过程，这就是Vue的生命周期。简单来说就是Vue实例从创建到销毁的过程。

Vue的生命周期分为了三个阶段：初始化阶段，更新阶段，销毁Vue的实例，每个阶段又有着自己的钩子函数

• 初始化阶段钩子函数
  • beforeCreate()实例创建前：数据和模板均未获取到
  • created()实例创建后：最早可以访问到data数据，但模板未获取到
  • beforeMount()挂载数据前：模板已经获取到，但是数据未挂载到模板上
  • mounted()数据挂载后：数据已经挂载到模板中
• 更新阶段钩子函数
  • beforeUpdate() 模板更新前:data改变后,更新模板前调用
  • updated()模板更新后:将data渲染到数据模板中
• 销毁阶段钩子函数
  • beforeDestory()实例销毁前
  • destoryed()实例销毁后

生命周期图示

父子组件生命周期顺序

• 挂载阶段

  该过程主要涉及 beforeCreate()、created()、beforeMount()、mounted() 4 个钩子函数。执行顺序为：

  父beforeCreate() -> 父created() -> 父beforeMount() -> 子beforeCreate() -> 子created() -> 子beforeMount() -> 子mounted() -> 父mounted()
  一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。

• 子组件更新阶段

  该过程主要涉及 beforeUpdate()、updated() 2 个钩子函数。注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。执行顺序为：
  父beforeUpdate() -> 子beforeUpdate() -> 子updated() -> 父updated()

• 父组件更新过程

  父beforeUpdate() ->父updated()

• 销毁阶段

  该过程主要涉及beforeDestroy()、destroyed() 2 个钩子函数。执行顺序为：
  父beforeDestroy() -> 子beforeDestroy() -> 子destroyed() -> 父destroyed()

eforeDestroy() -> 子destroyed() -> 父destroyed()

Vue 父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外