Vue生命週期鉤子函數

下面先附上官網的一張圖示，附有註釋講解。隨着你的不斷學習和使用，它的參考價值會愈來愈高。

全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着 你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是由於箭頭函數綁定了父上下文，所以 this與你期待的 Vue 實例不一樣。

• beforeCreate

在實例建立以前，data中的數據，methods、watch、computed裏的方法都還不能訪問 打印出來全都是undefined。那麼問題來了：如何在這個生命週期獲取data中的數據呢？

異步方式獲取data：this.$nextTick或者setTimeout都行。至關於在初始化前告訴容器，等整個視圖都渲染完畢再跑裏面的代碼。這種方式別說拿data了，拿渲染完DOM都OK~

同步方式獲取data:  在beforeCreate前，全部的options都會先存到vm.$options中, 就是直接從this.$options.data裏去拿。好比this.$options.data()[key]就好。以下:

export default {
  name: 'App',
  data () {
    return {
      b: {
        name: 'clearlove'
      }
    }
  },
  beforeCreate () {
    console.log(this.$options.data()['b'], '實例建立以前')    //{ name: 'clearlove'} '實例建立以前'
  }
} 
// this.$options.data就是上方的data函數複製代碼

可是實際狀況中，歷來沒遇到過須要在組件還沒初始化就去拿data的……

• created

實例已經建立，能夠直接使用實例中的數據和方法，可是還不能對DOM節點進行訪問。即$el屬性不可見。該階段容許進行異步請求

<template>
  <div id="app">
    <div id="nav" ref="myDiv"></div>
  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$refs.myDiv, '實例建立完成')    // undefined '實例建立完成'
  }
}複製代碼

• beforeMount

相關的 render 函數首次被調用。

• mounted

相關的 render 函數首次被調用。DOM節點已經渲染，能夠進行DOM操做，好比事件監聽。該階段容許進行異步請求，可是若是是父組件異步獲取數據要使用props傳遞給子組件的話，則要在created裏去發異步請求。具體緣由看下方父子組件的生命週期

• beforeUpdate

數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。能夠修改data，並不會觸發附加的衝渲染過程。這裏的$el對象已經修改，可是頁面上的數據尚未發生改變。

• updated

DOM結構上的數據已經完成更新。若再次修改data，會再次觸發beforeUpdate、updated，進入死循環。

• beforeDestroy

實例被銷燬前調用，也就是說在這個階段仍是能夠調用實例的。

實例的銷燬，vue實例仍是存在的，只是解綁事件的監聽和數據與view的綁定，即數據驅動。

• destroyed

實例被銷燬後調用，全部的事件監聽器已被移除，子實例被銷燬。

這裏再簡單說一下父子組件的生命週期：

• 加載渲染過程： 

 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 

• 子組件更新過程： 

 父beforeUpdate->子beforeUpdate->子updated->父updated 

• 父組件更新過程： 

 父beforeUpdate->父updated 

• 銷燬過程： 

 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

總結

Vue的生命週期函數爲開發者提供了很是便利的操做。可是善用生命週期纔會不踩坑，掌握好Vue的生命週期是很是重要的。它能在很大程度上減小咱們平常開發的BUG。

必定須要注意數據獲取是個異步過程，而生命週期函數的運行是獨立的！只要涉及到DOM更新的操做，推薦你們使用Vue的自帶方法$nextTick。這個方法的意思是把回調函數內的操做延遲到下一個DOM更新循環以後。Vue自己會將全部DOM更新的操做放入一個隊列裏，$nextTick就是會將方法內回調函數的操做延遲到隊列裏下一個DOM更新後執行。