Vue lifecycle 生命週期詳解

本文章主要介紹在全局混入、多個混入情況下初始化渲染的生命週期、更新生命週期以及銷燬的生命週期。

項目地址：vue-lifecycle
演示地址：vue-lifecycle

目錄說明

src/mixin 目錄下放的是不同組件或者頁面的混入。

文件	說明
allMixin.js	爲全局混入
appAMixin.js	app.vue 的 AMixin
appBMixin.js	app.vue 的 BMixin
homeAMixin.js	Home.vue 的 AMixin
homeBMixin.js	Home.vue 的 BMixin
homeAComponentAMixin.js	Home.vue 中的 HomeAComponent.vue 組件的 AMixin
homeAComponentBMixin.js	Home.vue 中的 HomeAComponent.vue 組件的 BMixin
homeBComponentAMixin.js	Home.vue 中的 HomeBComponent.vue 組件的 AMixin
homeBComponentBMixin.js	Home.vue 中的 HomeBComponent.vue 組件的 BMixin

mixin 混入說明

上面目錄中提到的 mixin 文件都是 先混入 AMixin 再混入 BMixin。

例如App.vue：

export default {
  name: 'App',
  mixins: [appAMixin, appBMixin], // 這裏的順序決定了對應文件內的生命週期執行順序
  ...
}

console 說明

頁面初始化時的 console

結論：

1. 全局混入會在之後每一個創建的 Vue 實例的時候優先執行全局混入的生命週期。

   例如：

   allMixin: beforeCreate
   allMixin: created
   route: / + allMixin: beforeMount
   allMixin: beforeCreate
   route: / + appAMixin: beforeCreate
   route: / + appBMixin: beforeCreate
   / + app: beforeCreate
   allMixin: created
   route: / + appAMixin: created
   route: / + appBMixin: created
   route: / + app: created
   

2. 組件mixins的生命週期早於當前組件的生命週期執行：

   例如：

   route: / + appAMixin: beforeCreate
   route: / + appBMixin: beforeCreate
   route: / + app: beforeCreate
   

3. 組件mixins配置混入的順序決定混入的生命週期先後執行。

   例如原本輸出順序爲：

   route: / + appAMixin: beforeCreate
   route: / + appBMixin: beforeCreate
   route: / + app: beforeCreate
   

   修改App.vue中的順序：

   export default {
     name: 'App',
     mixins: [appBMixin, appAMixin],
     ...
   }
   

   輸出順序就變更爲：

   route: / + appBMixin: beforeCreate
   route: / + appAMixin: beforeCreate
   route: / + app: beforeCreate
   

4. 父子組件加載渲染過程時的生命週期：

   1. 父組件： beforeCreate -> created -> beforeMount
   2. 子組件： -> beforeCreate -> created -> beforeMount -> mounted
   3. 父組件： -> mounted

   這裏先把全局混入及Home.vue中的混入去除，看起來會更清楚，例如：

   route: / + home: beforeCreate
   route: / + home: created
   route: / + home: beforeMount
   route: / + HomeAComponent: beforeCreate
   route: / + HomeAComponent: created
   route: / + HomeAComponent: beforeMount
   route: / + HomeBComponent: beforeCreate
   route: / + HomeBComponent: created
   route: / + HomeBComponent: beforeMount
   route: / + HomeAComponent: mounted
   route: / + HomeBComponent: mounted
   route: / + home: mounted
   

5. 兄弟組件加載渲染過程時的生命週期：

   1. 兄組件：beforeCreate -> created -> beforeMount
   2. 弟組件：-> beforeCreate -> created -> beforeMount
   3. 兄組件：-> mounted
   4. 弟組件：-> mounted

   例如：

   route: / + HomeAComponent: beforeCreate
   route: / + HomeAComponent: created
   route: / + HomeAComponent: beforeMount
   route: / + HomeBComponent: beforeCreate
   route: / + HomeBComponent: created
   route: / + HomeBComponent: beforeMount
   route: / + HomeAComponent: mounted
   route: / + HomeBComponent: mounted
   

路由切換時的 console

路由切換至about時的 console:

路由切換至home時的 console:

結論：

1. 路由切換時會觸發App.vue的beforeUpdate -> 當前路由下的組件的創建（生命週期按照父子組件及兄弟組件到最後的一個組件的beforeMount） -> 銷燬上個路由及其組件 -> App.vue的updated。

2. 父子組件銷燬過程：

   1. 父組件： beforeDestroy
   2. 子組件： -> beforeDestroy -> destroyed
   3. 父組件： -> destroyed

3. 兄弟組件銷燬過程：

   1. 兄組件： beforeDestroy -> destroyed
   2. 弟組件： beforeDestroy -> destroyed

組件 v-if 和 v-show 的切換

Home.vue 中點擊 home按鈕A/home按鈕B 使用 v-if/v-show 切換顯示隱藏 組件A/組件B。

v-if 組件A:

v-show 組件B：

結論：

1. v-if 切換隱藏組件的時候會依次觸發：

   1. 父組件： beforeUpdate
   2. v-if作用的組件：展示的時候會走初始化渲染的生命週期，隱藏的時候會走銷燬的生命週期
   3. 父組件： updated

2. v-show 切換隱藏組件的時候會依次觸發：

   1. 父組件： beforeUpdate
   2. 父組件： updated

組件內 v-if 和 v-show 的切換

HomeAComponent.vue 中點擊 按鈕1/按鈕2 使用 v-if/v-show 切換顯示隱藏 show content1/show content2。

v-if show content1：

v-show show content2：

結論：

1. 僅觸發當前組件的 beforeUpdate -> updated