Vue2.0中生命周期與鉤子函數(shù)的示例分析
小編給大家分享一下Vue 2.0中生命周期與鉤子函數(shù)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為魯山企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站，魯山網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
vue生命周期簡介
咱們從上圖可以很明顯的看出現(xiàn)在vue2.0都包括了哪些生命周期的函數(shù)了。
生命周期探究
對于執(zhí)行順序和什么時候執(zhí)行，看上面兩個圖基本有個了解了。下面我們將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)行。
ps:下面代碼可以直接復(fù)制出去執(zhí)行
{{ message }}
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)
}
})
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掛載的時候再把值渲染進(jìn)去。
update 相關(guān)
這里我們在 chrome console里執(zhí)行以下命令
app.message= 'yes !! I do';
下面就能看到data里的值被修改后，將會觸發(fā)update的操作。
destroy 相關(guān)
有關(guān)于銷毀，暫時還不是很清楚。我們在console里執(zhí)行下命令對 vue實例進(jìn)行銷毀。銷毀完成后，我們再重新改變message的值，vue不再對此動作進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。
app.$destroy();
以上是“Vue 2.0中生命周期與鉤子函數(shù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：Vue2.0中生命周期與鉤子函數(shù)的示例分析
當(dāng)前地址：http://weahome.cn/article/igihsp.html
重慶分公司
重慶分公司
