Vue 的父組件和子組件生命周期鈎子函數執行順序

Vue 的父組件和子組件生命周期鈎子函數執行順序可以歸類為以下 4 部分：

• 加載渲染過程

  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

注意 mounted 不會保證所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以在 mounted 內部使用 vm.$nextTick：

 

mounted: function () { this.$nextTick(function () { // Code that will run only after the
    // entire view has been rendered
 }) }

 

 

 

• 子組件更新過程

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

• 父組件更新過程

  父 beforeUpdate -> 父 updated

• 銷毀過程

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