詳解 Vue 八大生命週期鉤子函式
此賬號為華為雲開發者社群官方運營賬號，提供全面深入的雲計算前景分析、豐富的技術乾貨、程式樣例，分享華為雲前沿資訊動態
本文分享自華為雲社群《一文帶你弄懂Vue八大生命週期鉤子函式》，原文作者：北極光之夜。
一。速識概念：
我們把一個物件從生成（new）到被銷燬（destory）的過程，稱為生命週期。而生命週期函式，就是在某個時刻會自動執行的函式。
按照官方的原話，就是每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。
簡單來說就是每個 Vue 例項在被建立時都要經過一系列的初始化過程：建立例項，裝載模板，渲染模板等。Vue 為生命週期中的每個狀態都設定了鉤子函式（監聽函式） 。每當 Vue 例項處於不同的生命週期時，對應的函式就會被觸發呼叫。
二。八大生命週期鉤子函式：
下面是官方文件裡的生命週期圖，英語好的同學可以看看：
三。結合程式碼瞭解：
先看案例基本程式碼如下，後面透過如下程式碼步驟演示一個物件從生成到被銷燬的過程各階段執行的生命週期函式。注意 show 函式的作用。
<！DOCTYPE html>
1。 beforeCreate：
這個階段 vue 例項剛剛在記憶體中建立，此時 data 和 methods 這些都沒初始化好。
在案例中新增 beforeCreate 鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， beforeCreate： function（）{ // 傳入該階段簡介與this，this就是該階段的vue例項 show（‘vue例項初始化之前’，this）； } }）
看執行結果：
可以看到，此時 vue 例項剛剛在記憶體中建立，其它什麼都 undefined。
2。created：
這個階段 vue 例項在記憶體中已經建立好了，data 和 methods 也能夠獲取到了，但是模板還沒編譯。
在案例中新增 created 鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， created： function（）{ show（‘vue例項初始化之後’，this）； } }）
看結果：
看到沒，已經知道 data 裡的資料了。其它的話都沒。
3。beforeMount：
這個階段完成了模板的編譯，但是還沒掛載到頁面上。
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， beforeMount： function（）{ show（‘掛載之前’，this）； } }）
看結果：
看到沒，要掛載的物件都編譯好了，但是頁面的 DOM 樹還沒掛上去，這個階段頁面還沒能顯示出來。
4。mounted：
這個階段，模板編譯好了，也掛載到頁面中了，頁面也可以顯示了。
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， mounted： function（）{ show（‘掛載之後’，this）； } }）
看結果：
5。beforeUpdate：
轉態更新之前執行此函式，此時 data 中資料的狀態值已經更新為最新的，但是頁面上顯示的資料還是最原始的，還沒有重新開始渲染 DOM 樹。
先改變 data 裡資料：
vm。information = ‘南極光之夜’；
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， beforeUpdate： function（）{ show（‘更新之前’，this）； } }）
看結果：
看到沒，vue 例項裡的資料已經變成了南極光之夜。但是此階段頁面 DOM 節點上顯示的還是初始的資料北極光之夜。
6。updated：
這個階段是轉態更新完成後執行此函式，此時 data 中資料的狀態值是最新的，而且頁面上顯示的資料也是最新的，DOM 節點已經被重新渲染了。
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， updated： function（）{ show（‘更新之後’，this）； } }）
看執行結果：
更新了，全都更新了~
7。beforeDestroy：
beforeDestroy 階段處於 vue 例項被銷燬之前，當然，這個階段 vue 例項還能用。
銷燬 Vue 例項：
vm。$destroy（）；
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， beforeDestroy： function（） { show（‘銷燬之前’，this）； } }）
看效果：
8。destroyed：
這個階段在 vue 例項銷燬後呼叫，此時所有例項指示的所有東西都會解除繫結，事件監聽器也都移除，子例項也被銷燬。
在案例中新增鉤子函式：
var vm = new Vue（{ el： ‘#app’， data： { information： ‘北極光之夜。’ }， destroyed： function（） { show（‘銷燬之後’，this）； } }）
看結果：
點選關注，第一時間瞭解華為雲新鮮技術~
