Vue生命周期示例詳解
首先看看Vue文檔里關(guān)于實(shí)例生命周期的解釋圖
那么下面我們來(lái)進(jìn)行測(cè)試一下
<section id="app-8">
{{data}}
</section>
var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
beforeCreate:function(){
console.log("創(chuàng)建前========")
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log("已創(chuàng)建========")
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log("mount之前========")
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("mounted========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("銷毀前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已銷毀========")
console.log(this.info)
console.log(this.$el)
}
})
代碼如上，瀏覽器開始加載文件
由上圖可知：
1、beforeCreate 此時(shí)$el、data 的值都為undefined
2、創(chuàng)建之后，此時(shí)可以拿到data的值，但是$el依舊為undefined
3、mount之前，$el的值為“虛擬”的元素節(jié)點(diǎn)
4、mount之后，mounted之前，“虛擬”的dom節(jié)點(diǎn)被真實(shí)的dom節(jié)點(diǎn)替換，并將其插入到dom樹中，于是在觸發(fā)mounted時(shí)，可以獲取到$el為真實(shí)的dom元素()
myVue.$el===document.getElementById("app-8") // true
接著，在console中修改data，更新視圖
觸發(fā)beforeUpdata 和updated
接著，執(zhí)行myVue.$destroy()
總結(jié)一下，對(duì)官方文檔的那張圖簡(jiǎn)化一下，就得到了這張圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue form表單動(dòng)態(tài)添加組件實(shí)戰(zhàn)案例
這篇文章主要介紹了Vue form表單動(dòng)態(tài)添加組件實(shí)戰(zhàn)案例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
element-plus 如何設(shè)置 el-date-picker 彈出框位置
el-date-picker 組件會(huì)自動(dòng)根據(jù)空間范圍進(jìn)行選擇比較好的彈出位置,但特定情況下,它自動(dòng)計(jì)算出的彈出位置并不符合我們的實(shí)際需求,故需要我們手動(dòng)設(shè)置,這篇文章主要介紹了element-plus 如何設(shè)置 el-date-picker 彈出框位置,需要的朋友可以參考下2024-07-07
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文將通過(guò)示例為大家詳細(xì)講講雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2022-09-09
keep-alive是Vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項(xiàng)目環(huán)境搭建總結(jié)篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08