一月 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頁面，點右鍵「檢查」就會有對應顯示的值。以下先以各步驟的的核心來區分。

１.負責 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來進行）。