Vue從甜小白到皮大佬系列(三) 生命週期

極客James發表於2019-08-28

Vue

? Vue構建大型單頁面電商應用開源啦!點我看原始碼??

閱讀時間預估:5分鐘

什麼是生命週期?

生命週期是指一個事物從生到死的過程,軟體也一樣,每個語言都有其生命週期,從出生到死亡,每個階段做每個階段應該做的事情,簡單說：一個元件從開始到最後消亡所經歷的各種狀態，就是一個元件的生命週期。

例如面前這位大俠,既然是小白那麼就要苦練基本功,千里之行始於足下,萬層高樓,平地起,相信在持續的努力中會有所進步,廢話不多說直接上乾貨。

官方傳送門

vue生命週期

生命週期鉤子函式的定義：從元件被建立，到元件掛載到頁面上執行，再到頁面關閉元件被解除安裝，這三個階段總是伴隨著元件各種各樣的事件，這些事件，統稱為元件的生命週期函式！
注意：Vue在執行過程中會自動呼叫生命週期鉤子函式，我們只需要提供這些鉤子函式即可
注意：鉤子函式的名稱都是Vue中規定好的！

鉤子函式 - beforeCreate()

說明：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫
注意：此時，無法獲取 data中的資料、methods中的方法

鉤子函式 - created()

注意：這是一個常用的生命週期，可以呼叫methods中的方法、改變data中的資料
vue例項生命週期 - 參考1
vue例項生命週期參考2
使用場景：傳送請求獲取資料

鉤子函式 - beforeMounted()

說明：在掛載開始之前被呼叫

鉤子函式 - mounted()

說明：此時，vue例項已經掛載到頁面中，可以獲取到el中的DOM元素，進行DOM操作

鉤子函式 - beforeUpdated()

說明：資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
注意：此處獲取的資料是更新後的資料，但是獲取頁面中的DOM元素是更新之前的

鉤子函式 - updated()

說明：元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。

鉤子函式 - beforeDestroy()

說明：例項銷燬之前呼叫。在這一步，例項仍然完全可用。
使用場景：例項銷燬之前，執行清理任務，比如：清除定時器等

鉤子函式 - destroyed()

說明：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

說了這麼多來點實在的,大佬一般如何在程式碼中合理的利用生命週期來構建程式碼呢?

  beforeCreate () {
   // 進行初始化事件，進行資料的觀測，可以看到在created的時候資料已經和data屬性進行繫結（放在data中的屬性當值發生改變的同時，檢視也會改變）。注意：此時還是沒有el選項
  },
  components: {},
  data () {
    return {
      show: false,
      msg: "hello word",
      mg: "你好世界"
    }
  },
  watch: {

  },
  methods: {
    destory () {
        // 呼叫銷燬
      this.$destroy();
    }
  },
  created () {
    // 在這一階段發生的事情還是比較多的。首先，會判斷物件是否有el選項：如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命週期，直到在該vue例項上呼叫vm.$mount(el)
  },
  beforeMount () {
    // &emsp;可以看到此時是給vue例項物件新增$el成員，並且替換掉掛在的DOM元素。因為在之前console中列印的結果可以看到beforeMount之前el上還是undefined。
  },
  mounted () {
    this.intervalID = setInterval(() => {
      console.log("++++++-------++++");
      this.show = !this.show;
    }, 1000);
   // 在mounted之前p中還是通過{{message}}進行佔位的，因為此時還沒有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之後可以看到h1中的內容發生了變化。
  },

  beforeUpdate () {
    // 當vue發現data中的資料發生了改變，會觸發對應元件的重新渲染，先後呼叫beforeUpdate和updated鉤子函式。
  },
  updated () {
    // 在beforeUpdate可以監聽到data的變化，但是view層沒有被重新渲染，view層的資料沒有變化。等到updated的時候，view層才被重新渲染，資料更新。
  },

  beforeDestory () {
    clearInterval(this.intervalID);
    // &emsp;beforeDestroy鉤子函式在例項銷燬之前呼叫。在這一步，例項仍然完全可用,可以用於清除定時器
  },
  destory () {
   //呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
  },
複製程式碼