Vue生命週期介紹和鉤子函式詳解
目錄
- 生命週期介紹和鉤子函式
- VUE生命週期鉤子
- Vue生命週期簡介
- create 和 mounted 相關
- update 相關
- destroy 相關
- 總結
Vue生命週期介紹和鉤子函式
元件每個階段它的內部構造是不一樣的，所以一般特定的鉤子做特定的事，比如Ajax獲取資料就可以在mounted階段。從Vue例項被建立開始到該例項最終被銷燬的整個過程叫做VUE的生命週期，在這個生命週期內發生了下面的事情：從vue例項被建立開始，首先vue例項被建立，之後開始資料的初始化，編譯模板，掛載dom，渲染dom,更新物件屬性，渲染dom，解綁銷燬。
VUE生命週期鉤子
生命週期鉤子又被叫做生命週期時間，生命週期函式，生命週期鉤子就是vue生命週期中出發的各類事件，這些事件被稱為生命週期鉤子，在vue生命週期中，大部分分為四個階段，建立，掛在，更新，銷燬，這四個階段各自對應兩個生命週期鉤子
一、建立部分(create)，就是vue例項被初始化，簡單的說就是我們在程式碼中進行了這個操作 var app = new Vue(),之後就進入的vue生命週期的建立階段。在建立階段中會有兩個提供給我們可的介面，分別是beforeCreate 和 created。 這兩個介面都是在建立階段觸發，但是兩個介面又有所不同，beforeCreate比created要先觸發，即vue例項初始化後，沒有進行資料讀取前就觸發，如果在此時進行讀取data中的資料就會提示unfined。 created 是在例項建立完成後再被呼叫，此時data中的資料已經寫入完成，但是還沒有進行dom的掛載，也就還沒有與頁面進行關聯，下面進入掛載階段。
二、掛載階段(mount)，該階段就是將頁面中dom掛載到例項化後的vue物件上。簡單的說就是執行了 el: ‘#dom'。該階段同樣有兩個介面供我們進行程式設計，分別是 beforemount 和 mounted 。這兩個介面的主要區別在與以有沒有將dom掛載到例項物件上，beforemount 是在掛載之前觸發，僅對模板進行解析，如果此時輸出需要掛載的dom的innerHTML的話，會將模板原樣輸出，並沒有將資料進行渲染。 mounted 實在dom掛載之後，可以將data中的資料渲染的頁面上。該階段之後就進入更新階段。
三、更新階段(update)，該階段是在頁面上的資料在第一次載入之後再次進行更新的時候。同樣對應兩個介面 beforeupdate 和 update。這兩個介面的差異主要在於有沒有對頁面dom進行渲染。在我們對data中的資料進行修改，且修改完成後觸發 beforeupdate ，此時data中的屬性值已經是修改完成的狀態，但是沒有對頁面的dom進行渲染。update 就是將資料渲染到頁面上。至此vue的生命週期已經進行到更新階段，在正常的使用中我們會多次的經常處於更新階段，對頁面的資料進行各種修改。但是為了滿足將不必要的事件關閉，釋放記憶體，就還需要銷燬階段。
Vue生命週期簡介
上面描述的幾個階段
使用程式碼觀察鉤子函式
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/" src="https://cdn.delivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/script">
var app = new Vue({
el: '#app',data: {
message : "xuxiao is boy"
},beforeCreate: function () {
console.group('beforeCreate 建立前狀態===============》');
console.log("%c%s","color:red","el : " + this.$el); //undefined
console.log("%c%s","data : " + this.$data); //undefined
console.log("%c%s","message: " + this.message)
},created: function () {
console.group('created 建立完畢狀態===============》');
console.log("%c%s","data : " + this.$data); //已被初始化
console.log("%c%s","message: " + this.message); //已被初始化
},beforeMount: function () www.cppcns.com{
console.group('beforeMount 掛載前狀態===============》');
console.log("%c%s","el : " + (twww.cppcns.comhis.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s","data : " + this.$data); //已被初始化
console.log("%c%s","message: " + this.message); //已被初始化
},mounted: function () {
console.group('mounted 掛載結束狀態===============》');
console.log("%c%s","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s","data : " + this.$data); //已被初始化
console.log("%c%s","message: " + this.message); //已被初始化
},beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
console.log("%c%s","el : " + this.$el);
console.log(this.$el);
console.log("%c%s","data : " + this.$data);
console.log("%c%s","message: " + this.message);
},updated: function () {
console.group('updated 更新完成狀態===============》');
console.log("%c%s","el : " + this.$el);
console.log(this.$el);
console.log("%c%s",beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態===============》');
console.log("%c%s","el : " + this.$el);
console.log(this.$el);
console.log("%c%s",destroyed: function () {
console.group('destroyed 銷燬完成狀態===============》');
console.log("%c%s","el : " + this.$el);
console.log(this.$el);
console.log("%c%s","data : " + this.$data);
console.log("%c%s","message: " + this.message)
}
})
</script>
</body>
</html>
create 和 mounted 相關
beforecreated：el 和 data 並未初始化
created:完成了 data 資料的初始化，el沒有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載
另外在標紅處，我們能發現el還是 {{message}}，這裡就是應用的 Virtual DOM（虛擬Dom）技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。
update 相關
destroy 相關
有關於銷燬，暫時還不是很清楚。我們在console裡執行下命令對 vue例項進行銷燬。銷燬完成後，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這麼理解，執行了destroy操作，後續就不再受vue控制了。
總結
beforecreate : 舉個例子：可以在這加個loading事件
created ：在這結束loading，還做一些初始化，實現函式自執行
mounted ： 在這發起後端請求，拿回資料，配合路由鉤子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前元件已被刪除，清空相關內容
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！