vue生命周期和鉤子函數

05-11

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。

生命周期圖示如下，官網生命周期函數介紹：https://cn.vuejs.org/v2/api/#選項-生命周期鉤子

總結一下，對官方文檔的那張圖簡化一下，就得到了這張圖。

生命周期函數代碼演示：

<!DOCTYPE html><html><head> <title>鉤子函數</title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><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 vm = new Vue({ el: #app, data: { message : "Welcome Vue" }, methods:{ change() { this.message = Datura is me; }, destroy() { vm.$destroy(); } }, beforeCreate: function () { console.group(beforeCreate 創建前狀態===============》); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message);//undefined }, created: function () { console.group(created 創建完畢狀態===============》); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:green","data : " + this.$data); //[object Object] => 已被初始化 console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue => 已被初始化 }, beforeMount: function () { console.group(beforeMount 掛載前狀態===============》); console.log("%c%s", "color:green","el : " + (this.$el)); //已被初始化 console.log(this.$el); // 當前掛在的元素 console.log("%c%s", "color:green","data : " + this.$data); //已被初始化 console.log("%c%s", "color:green","message: " + this.message); //已被初始化 }, mounted: function () { console.group(mounted 掛載結束狀態===============》); console.log("%c%s", "color:green","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:green","data : " + this.$data); //已被初始化 console.log("%c%s", "color:green","message: " + this.message); //已被初始化 }, beforeUpdate: function () { alert("更新前狀態"); console.group(beforeUpdate 更新前狀態===============》); //這裡指的是頁面渲染新數據之前 console.log("%c%s", "color:green","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:green","data : " + this.$data); console.log("%c%s", "color:green","message: " + this.message); alert("更新前狀態2"); }, updated: function () { console.group(updated 更新完成狀態===============》); console.log("%c%s", "color:green","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:green","data : " + this.$data); console.log("%c%s", "color:green","message: " + this.message); }, beforeDestroy: function () { console.group(beforeDestroy 銷毀前狀態===============》); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group(destroyed 銷毀完成狀態===============》); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } })</script></body></html>

1. 在beforeCreate和created鉤子函數之間的生命周期

在這個生命周期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。注意看下：此時還是沒有el選項。

2. created鉤子函數和beforeMount間的生命周期

在這一階段發生的事情還是比較多的。首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期，直到在該vue實例上調用vm.$mount(el)。此時注釋掉代碼中:

el: #app,

然後運行可以看到到created的時候就停止了：

如果我們在後面繼續調用vm.$mount(el),可以發現代碼繼續向下執行了。

然後，我們往下看，template參數選項的有無對生命周期的影響。

（1）.如果vue實例對象中有template參數選項，則將其作為模板編譯成render函數。

（2）.如果沒有template選項，則將外部HTML作為模板編譯。

（3）.可以看到template中的模板優先順序要高於outer HTML的優先順序。

修改代碼如下, 在HTML結構中增加了一串html，在vue對象中增加了template選項：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width_=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期學習</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script></head><body> <div id="app">  <h1>{{message + 這是在outer HTML中的}}</h1> </div></body><script> var vm = new Vue({ el: #app, template: "<h1>{{message +這是在template中的}}</h1>", //在vue配置項中修改的 data: { message: Vue的生命周期 }</script></html>

執行後的結果可以看到在頁面中顯示的是：template選項模板替換掉html上模板。

在vue對象中還有一個render函數，它是以createElement作為參數，然後做渲染操作，而且我們可以直接嵌入JSX.

new Vue({ el: #app, render: function(createElement) { return createElement(h1, this is createElement) }})

可以看到頁面中渲染的是：render函數返回的html代碼。

所以綜合排名優先順序：render函數選項 > template選項 > outer HTML.

3. beforeMount和mounted 鉤子函數間的生命周期

可以看到此時是給vue實例對象添加$el成員，並且替換掉掛在的DOM元素。因為在之前console中列印的結果可以看到beforeMount之前el上還是undefined。

4. mounted

觀察上圖，在beforeMount時p中還是通過{{message}}進行佔位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之後可以看到p中的內容發生了變化。

5. beforeUpdate鉤子函數和updated鉤子函數間的生命周期

當vue發現data中的數據發生了改變或者切換路由的時候，會觸發對應組件的重新渲染，先後調用beforeUpdate和updated鉤子函數。我們在console中輸入：

vm.message = 觸發組件更新

發現觸發了組件的更新：

6. beforeDestroy和destroyed鉤子函數間的生命周期

beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed鉤子函數在Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

總結：

beforecreate : 舉個栗子：可以在這加個loading事件

created ：在這結束loading，還做一些初始化，實現函數自執行

mounted ：在這發起後端請求，拿回數據，配合路由鉤子做一些事情

beforeDestory：你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容

對於前端學習有不懂的，或者遇到學習瓶頸，不知道學習方法，可以來我們前端群：592569448，小編整理了最新的JavaScript、jQuery、bootstrap、angularJS、react、nodejs等企業級框架教程，還有PDF文檔資料都上傳到網盤了，來幫助大家一起成長。