Vue.js嵌套組件生命周期執行順序

• 2019 年 12 月 27 日
• 筆記

一次面試被問到的問題，第一次還確實有點懵逼，特此記錄下來。

有組件A，組件B，組件C，組件C是組件B的子組件，組件B又是組件A的子組件，那麼直觀的層級結構如下：

ComponentA  --ComponentB  ----ComponentC

問：他們之間生命周期函數的調用順序是什麼？

下面的代碼表示上述結構，全局註冊了三個組件Comp、childrenA 和 childrenB。在 childrenA 中引用 childrenB，在 Comp 中 引用 childrenA。

Vue.component('comp', {      template: '<div><children-a></children-a></div>',      beforeCreate() {          console.log('Comp beforeCreate')      },      created() {          console.log('Comp created')      },      beforeMount() {          console.log('Comp beforeMount')      },      mounted() {          console.log('Comp mounted')      },  })  Vue.component('childrenA', {      template: '<div><children-b></children-b></div>',      beforeCreate() {          console.log('--childrenA beforeCreate')      },      created() {          console.log('--childrenA created')      },      beforeMount() {          console.log('--childrenA beforeMount')      },      mounted() {          console.log('--childrenA mounted')      },  })  Vue.component('childrenB', {      template: '<div>{{text}}</div>',      data() {          return {              text: 'childrenB'          }      },      beforeCreate() {          console.log('----childrenB beforeCreate')      },      created() {          console.log('----childrenB created')      },      beforeMount() {          console.log('----childrenB beforeMount')      },      mounted() {          console.log('----childrenB mounted')      },  })  new Vue({      el: '#app'  })

輸出結果如下：

Comp beforeCreate  Comp created  Comp beforeMount  --childrenA beforeCreate  --childrenA created  --childrenA beforeMount  ----childrenB beforeCreate  ----childrenB created  ----childrenB beforeMount  ----childrenB mounted  --childrenA mounted  Comp mounted

可以看到，先執行父級的beforeCreate、created 和 beforeMount，然後再去執行子組件的beforeCreate、created 和 beforeMount，如果子組件下面沒有子組件了，就執行 mounted，然後再返回父級執行 mounted。

整個過程用圖表示如下：

Vue嵌套組件生命周期執行順序

完！

本文代表個人觀點，內容僅供參考。若有不恰當之處，望不吝賜教！

本文鏈接：https://zhangbing.site/2018/12/05/Vue-js嵌套組件生命周期執行順序/。