我與VueJs第7天_Vue實例化後的生命週期

紅框是各個Hook(鉤子)函式的名稱，這些鉤子代表 Vue 實體的每個階段，分別的介紹如下:

beforeCreate : 實例初始化立即叫用，這時還未創建實例，所以任何 Vue 實體中的設定(例如: data )都還未配置。

created : 完成創建實例，這時 Vue 實體中的配置除了 $el 外已全部配置，而 $el 要在掛載模板後才會配置。

beforeMount : 在 Vue 實體中的定義被掛載到目標元素之前叫用，這時的 $el 會是還未被 Vue 實體中的定義渲染的初始設定模板。

mounted : Vue 實體上的設置已經安裝上模板，這時的 $el 是已經藉由實體中的定義渲染而成的真正的頁面。

beforeUpdate : 當實體中的 data 產生變化後或是執行 vm.$forceUpdate() (opens new window)叫用，這時的頁面還未被重渲染為改變後的畫面。

updated : 在重新渲染頁面後叫用，這時的頁面已經被重渲染成改變後的畫面。

beforeDestroy : 在此實體被銷毀前時叫用，這時實體還是擁有完整的功能。

destroyed : 此實體被銷毀後叫用，這時實體中的任何定義( data 、 methods...等)都已被解除綁定，代表在此做的任何操作都會失效。

基本分四階段

Create -> Mount -> Update -> Destroy

Vue 的實體物件從建立、掛載、更新，到銷毀移除，

這一連串的過程，我們將它稱作生命週期。

在這個過程中， Vue.js 提供了開發者在這些週期階段做

對應處理的 callback function，

這些 callback function 就稱它叫生命週期的 Hooks function。

beforeCreate 及 created : 創建實體。

(唯2個在server side渲染的生命週期function)

beforeCreate : Vue 實體被建立，狀態與事件都尚未初始化

created : Vue 實體已建立，狀態與事件已初始化完成 (prop、data、computed 等屬性已建立，vm.$el 屬性無法使用 )

beforeMount 及 mounted : 掛載目標元素。

(時常在mounted此監聽DOM事件或者ajax初始定義處理)

beforeMount : Vue 實體尚未與模板 (DOM 節點) 綁定

流程圖上有提到，在叫用 beforeMount 前 Vue 已經決定模板的樣式，

所以在 beforeMount 中的 $el 已經有值了，只是它還未依照 Vue 實體上的定義所渲染，只是個初始設定的模板，因此可以看到 {{a}} 、 v-on 這些模板語法都還未被轉換。

(PS:所以在 beforeMount 前不能操作 DOM 元素。)

mounted : Vue 實體與掛載完成， el 的目標 DOM 被 $el 所替換 (可以視作 jQuery 的 Ready)

在 mounted 被叫用時已經把 Vue 實體上的定義綁定到元素上，

所以這裡看到的是經由 Vue 渲染後的配置。

beforeUpdate 及 updated : data 改變後的重渲染。

beforeUpdate : 當狀態被變動時，畫面同步更新前

updated : 當狀態被變動時，畫面已同步更新完成

beforeDestroy 及 destroyed : 銷毀實體。

Ref:

https://book.vue.tw/CH1/1-7-lifecycle.html

https://vuejs.org/v2/guide/instance.html

https://ithelp.ithome.com.tw/articles/10214359

https://peterhpchen.github.io/VuejsQuest/basic/04_Lifecycle.html#%E5%AF%A6%E9%9A%9B%E6%BC%94%E7%B7%B4

第25個冬天