0%

Vue 生命週期 (Lifecycle)

發表於 更新於 分類於 閱讀次數：

最近開始接觸Vue，趁著記憶還很新的時候記錄一下我所記得的內容。
Vue的生命週期就是Vue的實體(Instance)到從建立->更新->摧毀的這段過程。
官方在這段過程中提供一些方法(Hook function)給開發者進行使用，如下圖中的紅色方框。

當我們生命週期到某一個點的時候就會觸發這個Hook function，因此可以在特定的時間點對Vue實體進行操作。

以下是我對Vue生命週期的解釋:

Vue 生命週期

以下我利用紅色將 Highlight Hook function 標示出來:

1.new Vue() :

建立Vue的實體

2.beforeCreate :

尚未初始化前，無法取得vue 實體裡的 vm.$data，也不會生成DOM元素。

3.Observe Data & Init Events：

開始初始化。

4.Created：

實體已經建立，屬性已綁定，因此在此才能拿到 vue 實體裡的vm.$ data，不過DOM元素還沒有生成。

5.判斷實體裡面的$.el是否有被掛載

如果沒有的話後續就都不會執行直到vm.$mount()被呼叫；有的話會繼續往下執行。

6.判斷實體內是否有template 屬性

有的話就使用template 的內容當作樣板之後用來render 畫面；沒有的話就使用綁定el的html當作樣板之後用來render 畫面。

7.beforeMount：

DOM元素渲染到畫面上以前調用。
模板 (template) 編譯並掛載至 HTML 之前，此時template中被綁定的元素還尚未轉換為要輸出的HTML，例如還是。

8.模板(template)編譯與掛載

9.mounted：

DOM元素渲染到畫面上後後調用。
模板 (template) 編譯並掛載至 HTML 之後，此時template中被綁定的元素已轉換為要輸出的HTML，例如0。此時就好像JQuery中的ready()。

10.beforeUpdate：

更新前，在這邊可以取得更新前與後的資料。

11.Create $.el ….and replace el ：

render 畫面

12.updated：

更新後。

13. activated：

有使用<keep-alive></keep-alive>才會用到。

14.deactivated：

有使用<keep-alive></keep-alive>才會用到。

15. beforeDestroy：

實體被摧毀前。

16.destroyed：

實體摧毀，監聽事件、子實體會被銷毀。

範例程式

這邊有一段 沒有使用<keep-alive></keep-alive>的 code 可以幫助理解，可以透過console來觀看生命週期。
一開始console如下：

1
2
3
4
5
6
7
8
9
"beforeCreate - this.count: " undefined
"beforeCreate - this.$el: " undefined
"created - this.count: " 0
"created - this.$el: " undefined
"beforeMount - this.$el: " "<div id='app'>
<h1> {{ count }}</h1>
<button class='btn btn-primary' @click='add'>Count</button>
</div>"
"mounted - this.$el: " "<div id='app'><h1> 0</h1> <button class='btn btn-primary'>Count</button></div>"
  1. 可以看到beforeCreate階段時，因為還沒init，所以data 跟 el 都取不到。
  2. created時 可以取到data 但還沒確認el。
  3. beforeMount時可以取得模板。
  4. mounted時取得模板並綁定屬性。

更新時的console:

第一個數字為畫面上的html取得的，第二個數字為this.count

這時你可能會有一個疑惑為什麼在beforeUpdate時的this.count 不是0，而是1。

因為這邊的this.count已經是觸發更新後的數字，只是尚未呈現在畫面上。

1
2
"beforeUpdate: " "0" 1
"updated: " "1" 1

此範例中注意事項

在練習這個範例時除了遇到beforeUpdate時的疑問外，還有幾個需要注意的點：

  1. 如果vue 實體中沒有綁定el 的話，beforeMount以後的hook function都不能使用。
  2. destroyed是銷毀監聽方法、子元素、data，但html要自己手動清除。
  3. destroyed要記得寫在el綁定的元素外面，不然摧毀事件會被刪除。

<keep-alive> </keep-alive>

用途：舉個例子做頁籤時或填寫表單時還是希望保留狀態，保留資料狀態不將實體destroyed。
使用該標籤時不會進入beforeDestroy與destroyed，而是變成activated與deactivated。

總結

了解Vue實體的生命週期可以讓你在對的階段做對的事。

舉個例子，像是透過ajax取得資料時應該要寫實體建立階段的created之後， 也就是created、beforeMount 與 mounted。

有人是建議放created，不建議在mounted 因為網頁畫面可能會有一段空白，但可以用loading 圖蓋過。

也有人建議放mounted，理由是所有DOM都準備好才塞資料

參考資料