什麼是生命週期
每個 Vue 例項在被建立時都要經過一系列的初始化過程，例如需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。
下圖是官網中例項的生命週期示例圖：
beforeCreate：是第一個生命週期函式，表示例項完全被創建出來之前會執行這個函式。在此函式執行時，data和methods中的屬性與方法定義都還沒有初始化。created：是第一個生命週期函式，在此函式中，data 和 methods 都已經被初始化好了。beforeMount：是第三個生命週期函式，表示模板已經在記憶體中編輯完成了，但是還沒有被渲染到頁面中。mounted：第四個生命週期函式，此時記憶體中的模板已經掛載到了頁面中，使用者可以看到渲染好的頁面。mounted是例項建立期間的最後一個生命週期函式，當此函式執行完畢，表示例項已經被完全建立好了。beforeUpdate：此時介面還沒有被更新。updated：updated 事件執行的時候，頁面和 data 資料已經保持同步。beforeDestroy：銷燬之前執行，當beforeDestroy函式執行時，表示vue例項已從執行階段進入銷燬階段，vue例項身上所有的方法與資料都處於可用狀態。destroyed：當destroy函式執行時，元件中所有的方法與資料已經被完全銷燬。示例：
我們結合程式碼去看鉤子函式的執行，例如下面這段程式碼：
<!DOCTYPE html><html><head> <title>Vue的屬性、方法和生命週期_俠課島(9xkd.com)</title> <script src="./src/vue.min.js" type="text/javascript" ></script></head><body><div id="app"> <p>{{ message }}</p> <input type="button" @click="change" value="更新資料" /> <input type="button" @click="destroy" value="銷燬" /></div><script type="text/javascript"> var app = new Vue({ el: '#app', data: { message : "俠課島歡迎你" }, methods:{ change() { this.message = '好好學習，天天向上'; }, destroy() { app.$destroy(); } }, beforeCreate: function () { console.group('beforeCreate 建立前狀態：'); console.log("%c%s", "color:gary" , "el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message) }, created: function () { console.group('created 建立完畢狀態：'); console.log("%c%s", "color:green","el : " + this.$el); console.log("%c%s", "color:green","message: " + this.message); }, beforeMount: function () { console.group('beforeMount 掛載前狀態：'); console.log("%c%s", "color:gary","el : " + (this.$el)); console.log("%c%s", "color:gary","message: " + this.message); }, mounted: function () { console.group('mounted 掛載結束狀態：'); console.log("%c%s", "color:orange","el : " + this.$el); console.log("%c%s", "color:orange","message: " + this.message); }, beforeUpdate: function () { console.group('beforeUpdate 更新前狀態：'); console.log("%c%s", "color:gary","el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message); }, updated: function () { console.group('updated 更新完成狀態：'); console.log("%c%s", "color:Violet","el : " + this.$el); console.log("%c%s", "color:Violet","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 銷燬前狀態：'); console.log("%c%s", "color:gary","el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message); }, destroyed: function () { console.group('destroyed 銷燬完成狀態：'); console.log("%c%s", "color:blue","el : " + this.$el); console.log("%c%s", "color:blue","message: " + this.message) } })</script></body></html>在瀏覽器中開啟：
鉤子函式一個指令定義物件可以提供如下幾個鉤子函式，這些鉤子函式都是可選：
bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。unbind：只調用一次，指令與元素解綁時呼叫。inserted：被繫結元素插入父節點時呼叫。update：所在元件的 VNode 更新時呼叫，可能發生在其子 VNode 更新之前。componentUpdated：指令所在元件的 VNode 及其子 VNode全部更新後呼叫。鉤子函式引數指令鉤子函式會被傳入以下引數：
el：指令所繫結的元素，可以用來直接操作 DOM。binding：一個物件，包含屬性有name、value、oldValue、arg、expression、modifiers等。vnode：Vue 編譯生成的虛擬節點。oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。鉤子函式使用下面是一個自定義鉤子使用：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue的學習_俠課島(9xkd.com)</title><script src="./src/vue.min.js"></script></head><body> <div id="app"> <my-comp v-if="message" :msg="message"></my-comp> <button @click="change">更改</button> </div></body><script> Vue.directive('hello', { bind: function (el) { console.log('bind') }, inserted: function (el) { console.log('inserted') }, update: function (el) { console.log('update') }, componentUpdated: function (el) { console.log('componentUpdated') }, unbind: function (el) { console.log('unbind') } }) var myComp = { template: '<h1 v-hello>{{msg}}</h1>', props: { msg: String } } new Vue({ el: '#app', data(){ return{ message:"俠課島" } }, methods:{ change: function () { this.message = '小飛俠' } }, components: { myComp: myComp }, });</script></html>演示效果：
最新評論