vue生命周期簡介
圖片發(fā)自簡書App
咱們從上圖可以很明顯的看出現(xiàn)在vue2.0都包括了哪些生命周期的函數(shù)了伟叛。
生命周期探究
對于執(zhí)行順序和什么時候執(zhí)行辆它，看上面兩個圖基本有個了解了。下面我們將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)行行贪。
ps:下面代碼可以直接復(fù)制出去執(zhí)行
<!DOCTYPE html>
<html>
<head>
? ? <title></title>
? ? <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
? ? <p>{{ message }}</p>
</div>
<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 掛載結(jié)束狀態(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>
</body>
</html>
create 和 mounted 相關(guān)
咱們在chrome瀏覽器里打開瞬场，F(xiàn)12看console就能發(fā)現(xiàn)
beforecreated：el 和 data 并未初始化
created:完成了 data 數(shù)據(jù)的初始化躲庄，el沒有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載
另外在標(biāo)紅處，我們能發(fā)現(xiàn)el還是 {{message}}飒泻，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)鞭光，先把坑占住了。到后面mounted掛載的時候再把值渲染進去泞遗。
update 相關(guān)
這里我們在 chrome console里執(zhí)行以下命令
app.message= 'yes !! I do';
下面就能看到data里的值被修改后惰许，將會觸發(fā)update的操作。
destroy 相關(guān)
有關(guān)于銷毀史辙，暫時還不是很清楚汹买。我們在console里執(zhí)行下命令對 vue實例進行銷毀。銷毀完成后聊倔，我們再重新改變message的值晦毙，vue不再對此動作進行響應(yīng)了。但是原先生成的dom元素還存在耙蔑，可以這么理解结序，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了纵潦。
app.$destroy();
生命周期總結(jié)
這么多鉤子函數(shù)徐鹤，我們怎么用呢，我想大家可能有這樣的疑問吧邀层，我也有返敬，哈哈哈。
beforecreate : 舉個栗子：可以在這加個loading事件
created ：在這結(jié)束loading寥院，還做一些初始化劲赠，實現(xiàn)函數(shù)自執(zhí)行
mounted ： 在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認(rèn)刪除XX嗎凛澎？ destoryed ：當(dāng)前組件已被刪除霹肝，清空相關(guān)內(nèi)容
當(dāng)然，還有更多塑煎，繼續(xù)探索中......
寫在最后
本文是一個vue的生命周期的理解沫换，如有錯誤還請大牛指正，希望共同進步最铁。
