vue 之各組件間生命週期函數執行順序

一、vue 生命週期函數

vue實例的創建都需要經歷過一系列生命週期鉤子函數，比如實例初始化、數據監聽、數據渲染、實例掛載、數據更新等等。
周期函數執行案例：

<template>
  <div class="test-demo">
    <button @click="clickMethod">show</button>
    <button @click="updateMethod">update props</button>
    <father v-if="visible" :updateObj='updateObj'></father>
  </div>
</template>
<script>
import ViewMixin from '@/mixins/view-mixins.js'
import father from './components/father'
export default {
  name: 'TestDemo',
  mixins: [
    ViewMixin()
  ],
  components: {
    father
  },
  data() {
    return {
      visible: true,
      updateObj: {test: 1}
    };
  },
  methods: {
    clickMethod() {
      this.visible = !this.visible
    },
    updateMethod() {
      this.updateObj.test = ++this.updateObj.test
    }
  },
  beforeCreate: function() { // 創建實例前
    console.log('beforeCreate 鉤子執行...：')
  },
  cteated: function() { // 創建實例時
    console.log('cteated 鉤子執行...：')
  },
  beforeMount: function() { // 數據渲染前
    console.log('beforeMount 鉤子執行...：')
  },
  mounted: function() { // 數據渲染時
    console.log('mounted 鉤子執行...：')
  },
  beforeUpdate: function() { // 數據更新前
    console.log('beforeUpdate 鉤子執行...：')
  },
  updated: function() { // 數據更新時
    console.log('updated 鉤子執行...：')
  },
  beforeDestroy: function() { // 實例銷燬前
    console.log('beforeDestroy 鉤子執行...：')
  },
  destroyed: function() { // 實例銷燬時
    console.log('destroyed 鉤子執行...：')
  }
}
</script>

每個生命週期函數執行順序如圖：

二、父子孫組件間各生命週期函數

每個組件都會有上述的生命週期函數，但父子類組件加載的順序如何呢？通常在實際開發中會遇到全局變量在訪問時沒有實時同步例如vuex、或者接口請求不是按我們開發的順序請求等等，這時可能與在組件內部鉤子函數執行順序有關。
案例如下，
父類組件：

<template>
 <div class="father">
   father
   <span>
     {{updateObj.test}}
   </span>
   <child :updateObj="updateObj"></child>
 </div>
</template>
<script>
import ViewMixin from '@/mixins/view-mixins.js'
import child from './child.vue'
export default {
 name: 'father',
 mixins: [
   ViewMixin()
 ],
 props: {
   updateObj: {
     type: Object
   }
 },
 components: {
   child
 },
 beforeCreate() {
   console.log('father-beforeCreate')
 },
 created() {
   console.log('father-created')
 },
 beforeMount() {
   console.log('father-beforeMount')
 },
 mounted() {
   console.log('father-mounted')
 },
 beforeUpdate() {
   console.log('father-beforeUpdate')
 },
 updated() {
   console.log('father-updated')
 },
 beforeDestroy() {
   console.log('father-beforeDestroy')
 },
 destroyed() {
   console.log('father-destroyed')
 }
}
</script>

子類組件：

<template>
 <div class="child">
   child
   <span>
     {{updateObj.test}}
   </span>
   <grandson :updateObj="updateObj"></grandson>
 </div>
</template>
<script>
import ViewMixin from '@/mixins/view-mixins.js'
import grandson from './grandson.vue'
export default {
 name: 'child',
 mixins: [
   ViewMixin()
 ],
 props: {
   updateObj: {
     type: Object
   }
 },
 components: {
   grandson
 },
 beforeCreate() {
   console.log('child-beforeCreate')
 },
 created() {
   console.log('child-created')
 },
 beforeMount() {
   console.log('child-beforeMount')
 },
 mounted() {
   console.log('child-mounted')
 },
 beforeUpdate() {
   console.log('child-beforeUpdate')
 },
 updated() {
   console.log('child-updated')
 },
 beforeDestroy() {
   console.log('child-beforeDestroy')
 },
 destroyed() {
   console.log('child-destroyed')
 }
}
</script>

孫類組件：

<template>
 <div class="grandson">
   grandson
   <span>
     {{updateObj.test}}
   </span>
 </div>
</template>
<script>
import ViewMixin from '@/mixins/view-mixins.js'
export default {
 name: 'grandson',
 mixins: [
   ViewMixin()
 ],
 props: {
   updateObj: {
     type: Object
   }
 },
 beforeCreate() {
   console.log('grandson-beforeCreate')
 },
 created() {
   console.log('grandson-created')
 },
 beforeMount() {
   console.log('grandson-beforeMount')
 },
 mounted() {
   console.log('grandson-mounted')
 },
 beforeUpdate() {
   console.log('grandson-beforeUpdate')
 },
 updated() {
   console.log('grandson-updated')
 },
 beforeDestroy() {
   console.log('grandson-beforeDestroy')
 },
 destroyed() {
   console.log('grandson-destroyed')
 }
}
</script>

組件的加載結果如下：

組件銷燬時結果如下：
組件更新時結果如下：

總結：組件加載時各生命週期在mounted鉤子之前按父類到子類的順序逐步更新，父類組件實例節點加載完按從子到父的順序執行mounted渲染；銷燬時也按從子到父順序執行destroyed,之前的鉤子按父到子；組件更新時按子到父類執行updated,之前的鉤子按父到子。

後續持續更新。。。