搞清Vue生命週期執行順序

前言

標題黨就是我··· 最近在學習一個前端的面試課程，裏面講到Vue相關知識時提到生命週期

這張圖你們很熟悉了吧

beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  },
  destroyed () {
    console.log('destroyed')
  }
複製代碼

順序也就這樣了，從命名也能猜出來，可是··· 若是加入父子組件呢？ 恩?? 反正我做爲菜狗複製粘貼工程師有點懵逼的··· 因此我就CLI一把梭了個項目，而後實驗開始。

父子組件生命週期執行順序

代碼很簡單，就是隨便寫個子組件引入，父子組件裏在各個生命週期Log一下而已

直接上結果

再畫個簡單的示意圖吧，菊黃色是子組件

結論，父組件先beforeCreate => created => beforeMount , 而後子組件開始beforeCreate => created => beforeMount => mounted 子組件掛載完成了，父組件再mounted

基本就是這樣了，那麼再複雜一點呢？

有孫組件呢

先簡單加上孫組件後

其實也能推斷出來，按照以前的邏輯。

結論，父組件先beforeCreate => created => beforeMount , 而後子組件開始beforeCreate => created => beforeMount ，而後孫組件beforeCreate => created => beforeMount => mounted，孫組件掛載完成了，子組件mounted，父組件再mounted

那麼加上Keep-Alive，再數據更新一下呢

都到這裏了複雜的直接上吧，什麼activated updated destroyed，大家一塊兒上吧我趕時間

代碼大概是這樣的，Index是父組件，List是子組件，secondChild是孫組件。父組件經過props傳遞數據給子組件，子組件繼續經過props把該數據傳給孫組件。

圖上大概標註了已經

ps:固然這還不是最複雜的··若是再配上router的守衛鉤子···emmmmm··個人頭髮······