快捷導(dǎo)航

淺談vue的生命周期

更新時(shí)間：2022年01月07日 15:15:03 作者：愛吃辣的玉兔

這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

1.什么是生命周期?有什么作用?

每一個(gè)vue實(shí)例在創(chuàng)建時(shí)都要經(jīng)歷一系列的初始化過(guò)程-----例如需要設(shè)置監(jiān)聽,編譯模板,將實(shí)例掛載到dom并在數(shù)據(jù)發(fā)生變化時(shí)更新dom等等.同時(shí)這個(gè)時(shí)候也會(huì)運(yùn)行一些生命周期鉤子的函數(shù),這些函數(shù),給用戶在不同階段添加代碼的機(jī)會(huì).例如:如果需要某些插件操作dom節(jié)點(diǎn),如果想在頁(yè)面渲染之后彈出廣告,那我們們最早可以再mounted中進(jìn)行.

2.第一次加載頁(yè)面會(huì)觸發(fā)哪幾個(gè)鉤子?

beforeCreate created beforeMount mounted

3.簡(jiǎn)述每個(gè)周期應(yīng)用于哪個(gè)場(chǎng)景?

beforeCreate:在new一個(gè)實(shí)例后,只有一些默認(rèn)的生命鉤子和默認(rèn)事件,其他的東西還沒(méi)有創(chuàng)建,在beforeCreate生命周期執(zhí)行時(shí),data和methods中的數(shù)據(jù)還沒(méi)有初始化,不能在這個(gè)階段使用data中的數(shù)據(jù)和methods的方法.

created:data和methods中的數(shù)據(jù)都已經(jīng)初始化好了,如果調(diào)用methods中的方法和操作data中的數(shù)據(jù)最早在這個(gè)階段進(jìn)行.

beforeMount:執(zhí)行這個(gè)鉤子事,內(nèi)存中已經(jīng)編譯好了模板,但是還沒(méi)有掛載到頁(yè)面中,此時(shí)的頁(yè)面還是舊的

mounted:執(zhí)行到這個(gè)鉤子時(shí),說(shuō)明vue實(shí)例已經(jīng)初始化完成,此時(shí)組件脫離了創(chuàng)建階段進(jìn)入到了運(yùn)行階段,如果需要某些插件操作dom節(jié)點(diǎn),那我們們最早可以再mounted中進(jìn)行

beforeUpdate:當(dāng)執(zhí)行這個(gè)鉤子時(shí),頁(yè)面還是舊的,data中的數(shù)據(jù)是更新后的,但是頁(yè)面的數(shù)據(jù)和data中的數(shù)據(jù)還沒(méi)有同步.

updated:頁(yè)面和data中的數(shù)據(jù)保持同步,頁(yè)面是新的了.

beforeDestory:vue實(shí)例開始從運(yùn)行階段進(jìn)入銷毀階段,這時(shí),data和methods,指令,過(guò)濾器.......都是可用的,還沒(méi)有真正銷毀.

destoryed:這時(shí),data和methods,指令,過(guò)濾器.......都是不可用的,組件已經(jīng)被銷毀了.