一月 25, 2019 | 前端與Vue

圖解 Vue 的生命週期

用圖去理解 Vue 在不同時期中 el 與 data 的變化。Vue 就像我們有孩童時期、青春期、壯年期跟老年期,各個時期有不同的任務與職責一樣。接下來,我們就一起來認識 Vue 的「 生命週期」。

回想剛開始使用 Vue 的時候,還在嘗試要將 JQuery 加在哪一個方法裡才能執行。如果只會做不知其所以然,對於未來要繼續使用 Vue 開發活生生是個大阻力。

此篇目的只在於,用圖去理解 Vue 在不同時期中 el 與 data 的變化。Vue 就像我們有孩童時期、青春期、壯年期跟老年期,各個時期有不同的任務與職責一樣。接下來,我們就一起來認識 Vue 的「 生命週期」。

生命週期圖

在開始文章前,先來一張圖讓透視 Vue 的一生。紅框白底的部分,是我們要釐清的重點,那以下我們就用範例開看看,各個生命週期的職務。(題外話:new Vue()即是我們稱之為的實體)。

圖自Vue 官網


正文開始

Vue有兩個基本要素,要被掛載的「元素」(el)跟「資料」(data),即如下圖。有了這兩個設定,就可以進行基本操作將 {{message}} 塞在 #app元素中。

為了要看到生命週期的各步驟el跟data的狀態,那我們就搭配Chrome的檢查,以 console.log 的來看看各自得到的結果是什麼。(beforeCreate請自行替換成其它步驟)。

beforeCreate: function () {
    console.log('目前DOM:' + document.getElementById('app').innerHTML);
    console.log("el : " + this.$el);
    console.log("data : " + this.$data); 
    console.log("message: " + this.message);
}

生命週期 - el 與 data 的狀態

當 console.log 都加入到各個生命週期步驟中,打開Chrome頁面,點右鍵「檢查」就會有對應顯示的值。以下先以各步驟的的核心來區分。

1.負責 data 的 beforeCreate 與 created

這是實體建立後,首先執行的步驟。

  • beforeCreate:在這部分元素尚未被掛載、data也還未被建立。在這階段是data跟el都是undefined,想要改message是沒有辦法的。

  • created:已經可以取用到 data,能夠開始整理資料並賦予值給屬性。在這部分就能開始做資料的處理。不過,el的掛載還沒開始,同上一樣是不可見。

2.負責 el 的 beforeMount 與 mounted:

  • beforeMount:el 已經被創建,尚未被掛在到元素上,所以將 el console出來,看到的是 {{message}}。在這步驟仍然是可以來處理資料的。

  • mounted:頁面已經加載完成,將渲染好的el掛載到 #app 上,所以看到的是"Hello Santa",而不是{{message}} 。也就是說,在這步驟中應用 Js or Jquery 可以處理到渲染後的數值。

以下的步驟,在初始化時不會觸發。在各位自己嘗試時,也一定沒有任何關於 Update 跟 destroyed 的 console 結果。

3. 資料變化觸發的 beforeUpdate 與 updated:

變更資料後會執行的步驟。例如在檢查上打下圖指令去修改原有的值。按下去就會發現觸發了 beforeUpdate 與 updated。可以觀察一下目前DOM的變化。

// 變更資料
app.message = "merry christmas"

  • beforeUpdate:資料更新時會觸發。從圖上可以看到el已經是資料更新後,還未被描繪在DOM上,所以目前DOM看到的是"Hello Santa"。

  • updated:資料已經更新至DOM,因此目前DOM變成了"merry christmas"(這步驟不適合控制DOM,官方有建議用其他計算屬性跟watch來進行)。

4. 刪除實體觸發的 beforeDestroy 與 destroyed:

這部分未做測試,有興趣的可以參考此篇(https://segmentfault.com/a/1190000013579739)

  • beforeDestroy:這步驟在是銷毀實體之前,所以在這期間內實體都還可以用。

  • destroyed:實體連帶子實體被銷毀了,同時使用的各種事件與監聽都會被解除。


結語

用法沒有絕對,只有合不合適。當你:

  • 想要賦值給data裡的屬性(像是message),可以在created、beforeMount或mounted。
  • 想要在被掛載的元素上操作DOM,可以在mounted。
  • 想要監控資料變動,試著使用其他計算屬性跟watch來取代updated

當然這只是透過圖解去看生命週期的各個時期,data與el的變化,親測後會更加明白在哪處理是最適當的。有興趣的也可以參考這幾篇很有幫助的文章,如Vue2.0 探索之路——生命周期和钩子函数的一些理解Vue 實體與生命週期vue 生命周期深入

hashtags: