11. 生命週期

Hooks

• Create
  • beforeCreated
  • created
• Mount
  • beforeMount
  • mounted
• Update
  • beforeUpdate
  • updated
• Destory
  • beforeDestory
  • destoryed

過程

Create

在記憶體裡面進行運算，還沒有掛在畫面、DOM 上。

• Initial events & lifecycle
  • Hook: beforeCreate
  • 在這裡可以讀到 Vue，但讀不到裡面的資料 (methods, computed, ...)。
• Initial injections & reactivity
  • Hook: created
  • 包含 data, computed, observer 。
  • 到這裡正式完成了 created 的動作。

Mount

判斷 DOM 有沒有準備好，把在記憶體算好的東西取代原本的 el，掛載到畫面上

• Has "el" option?
  • 無：到旁邊等著
  • 有：繼續往下判斷
• Has "template" option? (for component)
  • 無：使用 el 這個外層掛載。
  • 有：渲染 template。
  • Hook: beforeMount
  • 到這裡會停下來，直到裡面的東西都產完，才會到 mounted 。
• Create vm.$el and replace "el" with it
  • Hook: mounted
  • 把在記憶體運算的內容取代 el
  • 資料掛載到 DOM 上面。
  • 所有要產生的內容都完成了，才會到這個階段

Update

時常會發生的循環階段

• When data changes
  • Hook: beforeUpdate
• Virtual DOM re-render and patch
  • Hook: updated

Destory

• When vm.$destory() is called
  • Hook: beforeDestory
  • 是這整個實體的生命週期最後可以操作 this 和其他資料、動作的位置。
  • 例如可以在這個階段解除計時器、事件的監聽等等。
• Teardown whaters, child components and event listeners
  • Hook: destoryed

範例

情境一：網頁初次載入

Vue 的實體生命週期，最外層進行到 beforeMount 的時候，會等到裡面的所有 component 都產生完，才進入到 mounted 。

情境二：增加一個新的 component

外層新增一個 component 的時候，對外層而言是更新，所以會有 beforeUpdate 和 updated 兩個 hook 。但對這個被新增的 component 而言，則會在這兩個 hook 之間經歷 create 和 mount 這兩個階段。

情境三：更新 component 裡面的資料

點擊 component 的加號時，裡面的數字會加一，因此 component 會經歷 beforeUpdate 和 updated 。至於外層無異動，故無影響。

情境四：移除網頁上的 component

有兩種觸發方式：

1. 把資料刪掉

資料刪掉後，component 也會跟著移除。外層則會更新。

2. 修改資料消滅 component

使用 "Self Destory" 按鈕讓 destoryed 為 true 來消滅 component。因此 component 會經歷 update 和 destory 兩個階段。

如果重新整理 Vue.js devtools ，會發現 Vue 的資料裡面沒有 component ，但畫面上仍存在。此時畫面上的 component 已經無法再觸發事件。

這樣的情況下，如果要移除畫面上的 component，只要找到裡面的資料進行移除就好。但是，因為 component 早就被移掉了，所以只會是外層進行更新。

建議使用資料驅動畫面，避免像這樣手動刪掉 component，以保持資料跟畫面的連貫。