Vue-父子组件 不同阶段生命周期内部的执行顺序

笔记

Posted by Wason on September 17, 2021

Vue-父子组件 不同阶段生命周期内部的执行顺序

  1. 单组件初次渲染完成触发的声明周期
    beforeCreate() → created() → beforeMount() → mounted()
  2. 不同情况先后顺序
    • 组件的调用顺序是:先父后子
    • 渲染完成的顺序是:先子后父
    • 组件的销毁操作是:先父后子
    • 销毁完成的顺序是:先子后父
  3. 创建/挂载阶段
    父组件先创建,做挂载准备;子组件再做创建和挂载,然后父组件再挂载
    父beforeCreate→ 父created→ 父beforeMounte→ 子beforCreate→ 子created→ 子beforeMount→ 父mounted
  4. 子组件更新阶段
    父beforeUpdate→ 子beforeUpdate→ 子updated→ 父updated
  5. 父组件更新阶段
    影响到子组件:父beforeUpdate→ 子beforeUpdate→ 子updated→ 父updated
    不影响子组件:父beforeUpdate→ 父update
  6. 销毁阶段
    父组件先做销毁准备,然后子组件完成销毁后,父组件再销毁
    父beforeDestroy→ 子beforeDestroy→ 子destroyed→ 父destroyed