vue生命周期鈎子函數詳解

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/qq_35585701/article/details/81216704
先放一張官網生命周期圖：

vue有8種生命周期函數：

鈎子函數	觸發的行為	在此階段可以做的事情
beforeCreadted	vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。	加loading事件
created	vue實例的數據對象data有了，$el還沒有	結束loading、請求數據為mounted渲染做准備
beforeMount	vue實例的$el和data都初始化了，但還是虛擬的dom節點，具體的data.filter還未替換。	...
mounted	vue實例掛載完成，data.filter成功渲染	配合路由鈎子使用
beforeUpdate	data更新時觸發
updated	data更新時觸發	數據更新時，做一些處理（此處也可以用watch進行觀測）
beforeDestroy	組件銷毀時觸發
destroyed	組件銷毀時觸發，vue實例解除了事件監聽以及和dom的綁定（無響應了），但DOM節點依舊存在	組件銷毀時進行提示

測試代碼：
組件模板自己試着寫就好，此處貼js代碼
（省略部分代碼）

export default {
  data () {
    return {
      todos: [],
      allCounts: 0,
      filter: 'all',
      id: 0,
      states: ['all', 'active', 'completed']
    }
  },
  beforeCreate () {
    console.log('==============' + 'beforeCreated' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  created () {
    console.log('==============' + 'created' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeMount () {
    console.log('==============' + 'beforeMount' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  mounted () {
    console.log('==============' + 'mounted' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeUpdate () {
    console.log('==============' + 'beforeUpdate' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  updated () {
    console.log('==============' + 'updated' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  beforeDestroy () {
    console.log('==============' + 'beforeDestroy' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  },
  destroyed () {
    console.log('==============' + 'destroyed' + '===================')
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.filter)
  }
 }

效果：

至於destroyed就不好演示了。
destroyed鈎子函數有一點一定要特別注意：在執行destroy方法后，對data的改變不會再觸發周期函數，此時的vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。所以對於實時顯示的通知型組件，在他destroyed之前，我們必須手動removeChild()刪除該節點；否則，DOM節點還是存在，影響瀏覽器性能。

還有一點需要補充：
組件套用時生命周期：
父組件：tabs
子組件：tab、tab-container
我的應用場景是：

<tabs>
  <tab />
  <tab />
  <tab />
  <tab-container />
</tabs>


/*tabs的打印代碼*/
  beforeMount () {
    console.log('============Tabs befortemounted==============')
  },
  mounted () {
    console.log('============Tabs mounted==============')
  },
  created () {
    console.log('============Tabs created==============')
  }

/*tab的打印代碼*/
  beforeMount () {
    console.log('----------------tab beforemounted-------------')
  },
  mounted () {
    this.$parent.panes.push(this)
    console.log('----------------tab mounted-------------')
  },
  created () {
    console.log('----------------tab created-------------')
  }

/*tab-container的打印代碼*/
  beforeMount () {
    console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!')
  },
  mounted () {
    console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!')
  },
  created () {
    console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!')
  }

瀏覽器結果：

結論：先執行父組件的created和beforeMounted函數；再按子組件的使用順序，執行子組件的created和beforeMounted函數；依舊按照子組件的執行順序執行mounted函數，最后是父組件的mounted函數；
也就是說父組件准備要掛載還沒掛載的時候，子組件先完成掛載，最后父組件再掛載；所以在真正整個大組件掛載完成之前，內部的子組件和父組件之間的數據時可以流通的（好難表達。。。。）
————————————————
版權聲明：本文為CSDN博主「小bearBear」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_35585701/article/details/81216704