vue生命周期簡介
生命周期探究
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
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)
},
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態(tài)===============》');
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); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結束狀態(tài)===============》');
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); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
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);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
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);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
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 銷毀完成狀態(tài)===============》');
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>
create 和 mounted 相關
beforecreated：el 和 data 并未初始化created:完成了 data 數(shù)據(jù)的初始化，el沒有beforeMount：完成了 el 和 data 初始化mounted：完成掛載
update 相關
在 chrome console里執(zhí)行以下命令
app.message= 'yes !! I do';
下面就能看到data里的值被修改后，將會觸發(fā)update的操作。
destroy 相關
有關于銷毀，暫時還不是很清楚。我們在console里執(zhí)行下命令對 vue實例進行銷毀。銷毀完成后，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。
app.$destroy();
鉤子函數(shù)詳解：
-
beforeCreate
官方說明：在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。
解釋：注意是 之前，這個時期，this變量還不能使用，在data下的數(shù)據(jù)，和methods下的方法，watcher中的事件都不能獲得到；這個時候的vue實例還什么都沒有，但是$route對象是存在的，可以根據(jù)路由信息進行重定向之類的操作。beforeCreate() { console.log(this.page); // undefined console.log{this.showPage); // undefined }, data() { return { page: 123 } }, methods: { showPage() { console.log(this.page); } } -
created
官方說明：在實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下配置：數(shù)據(jù)觀測(data observer) ，屬性和方法的運算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，data 可以訪問，watcher、events、methods也出現(xiàn)了，若根據(jù)后臺接口動態(tài)改變data和methods的場景下，可以使用。
created() { console.log(this.page); // 123 console.log{this.showPage); // ... $('select').select2(); // jQuery插件需要操作相關dom，不會起作用 }, data() { return { page: 123 } }, methods: { showPage() { console.log(this.page); } } -
beforeMounte
官方說明：在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用。解釋說明：但是render正在執(zhí)行中，此時DOM還是無法操作的。我打印了此時的vue實例對象，相比于created生命周期，此時只是多了一個$el的屬性，然而其值為undefined。頁面渲染時所需要的數(shù)據(jù)，應盡量在這之前完成賦值。
-
mounted
官方說明：el被新創(chuàng)建的vm.$el替換，并掛載到實例上去之后調(diào)用該鉤子。如果root實例掛載了一個文檔內(nèi)元素，當mounted被調(diào)用時vm.$el也在文檔內(nèi)。解釋說明：掛載完畢，這時
dom節(jié)點被渲染到文檔內(nèi)，一些需要dom的操作在此時才能正常進行。此時元素已經(jīng)渲染完成了，依賴于DOM的代碼就放在這里吧~比如監(jiān)聽DOM事件。mounted() { $('select').select2(); // jQuery插件可以正常使用 },
5.beforeUpdate
官方說明：$vm.data更新之后，虛擬DOM重新渲染 和打補丁之前被調(diào)用。
解釋說明：可以在這個鉤子中進一步地修改$vm.data，這不會觸發(fā)附加的重渲染過程。
6.updated
官方說明：****虛擬DOM重新渲染 和打補丁之后被調(diào)用。
解釋說明：當這個鉤子被調(diào)用時，組件DOM的data已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。但是不要在此時修改data，否則會繼續(xù)觸發(fā)beforeUpdate、updated這兩個生命周期，進入死循環(huán)！
7.beforeDestroy
官方說明：實例被銷毀之前調(diào)用。
解釋說明：在這一步，實例仍然完全可用。實例要被銷毀了，在被銷毀之前做一些校驗和判斷。
8.destroyed
官方說明：Vue實例銷毀后調(diào)用。
解釋說明：此時，Vue實例指示的所有東西已經(jīng)解綁定，所有的事件監(jiān)聽器都已經(jīng)被移除，所有的子實例也已經(jīng)被銷毀。這時候能做的事情已經(jīng)不多了，只能加點兒提示toast之類的東西吧。
總結
beforecreate: 頁面加載完成之前，可以在這里加個loading事件
created：在這結束loading，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行
mounted： 在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情
beforeDestroy： 銷毀之前使用
destroyed：當前組件已被刪除，清空相關內(nèi)容
PS：beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed這幾個鉤子函數(shù)，在服務器端渲染期間不被調(diào)用。
