一起來(lái)學(xué)習(xí)Vue的生命周期

更新時(shí)間：2022年02月21日 17:00:19 作者：Revin050

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

生命周期

生命周期的簡(jiǎn)單介紹

1.生命周期又叫做：生命周期回調(diào)函數(shù)、生命周期函數(shù)、生命周期鉤子。

2.生命周期是：Vue在關(guān)鍵時(shí)刻幫我們調(diào)用的一些特殊名稱(chēng)的函數(shù)。

3.生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫(xiě)的。

4.生命周期函數(shù)中的this指向是vm 或組件實(shí)例對(duì)象。

在Vue官網(wǎng)教學(xué)中，Vue實(shí)例=>實(shí)例生命周期鉤子中列舉了8個(gè)生命周期函數(shù)

分別是：

1.beforeCreate()

2.created()

3.beforeMount()

4.mounted()（重點(diǎn)）

5.beforeUpdate()

6.updated()

7.beforeDestroy() （重點(diǎn)）

8.destroyed()

這八個(gè)生命周期函數(shù)涵蓋了Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程即創(chuàng)建之前、創(chuàng)建完成、掛載之前、掛載完成、更新之前、更新完成、銷(xiāo)毀之前、銷(xiāo)毀完成。

beforeCreate與created

beforeCreate（）

當(dāng)使用 beforeCreate時(shí)，由于還沒(méi)完成創(chuàng)建，因此無(wú)法通過(guò)vm訪(fǎng)問(wèn)到data中的數(shù)據(jù)、methods中的方法。

created（）

當(dāng)使用 created時(shí)，由于已經(jīng)完成了創(chuàng)建，因此可以通過(guò)vm訪(fǎng)問(wèn)到data中的數(shù)據(jù)、methods中的方法。

beforeMount與mounted

beforeMount（）

當(dāng)使用 beforeMount時(shí)，由于還未完成掛載，因此此時(shí)頁(yè)面呈現(xiàn)的內(nèi)容都是未經(jīng)Vue編譯的DOM結(jié)構(gòu)，并且在此時(shí)對(duì)DOM的所有操作最終都不奏效。不奏效的原因是當(dāng)運(yùn)行到mounted時(shí)，系統(tǒng)會(huì)將內(nèi)存中的虛擬DOM轉(zhuǎn)為真實(shí)DOM插入頁(yè)面，因此修改的內(nèi)容會(huì)被覆蓋。

mounted（）（重要）

當(dāng)使用mounted時(shí)，此時(shí)已經(jīng)完成掛載，頁(yè)面呈現(xiàn)的內(nèi)容會(huì)變成經(jīng)過(guò)Vue編譯的DOM，同時(shí)此時(shí)對(duì)DOM的操作均有效。當(dāng)運(yùn)行到這時(shí)，初始化的過(guò)程就結(jié)束了。一般在此進(jìn)行如下操作：開(kāi)啟定時(shí)器、發(fā)送網(wǎng)絡(luò)請(qǐng)求、訂閱消息等初始化操作。

beforeUpdate與updated

數(shù)據(jù)發(fā)生變化時(shí)，會(huì)使用beforeUpdate與updated進(jìn)行更新

beforeUpdate（）

當(dāng)使用beforeUpdate時(shí)，此時(shí)還未更新完畢，數(shù)據(jù)已經(jīng)成功獲取，但是還未展示到頁(yè)面中。因此會(huì)存在以下現(xiàn)象，數(shù)據(jù)是新數(shù)據(jù)但是頁(yè)面中顯示的是舊數(shù)據(jù)。此時(shí)頁(yè)面與數(shù)據(jù)尚未保持同步。

updated（）

當(dāng)使用updated時(shí)，此時(shí)已經(jīng)更新完畢。這時(shí)候數(shù)據(jù)是新數(shù)據(jù)，頁(yè)面中顯示的也是新數(shù)據(jù)。此時(shí)頁(yè)面與數(shù)據(jù)保持同步。

beforeDestroy與destroyed

當(dāng)Vue實(shí)例要銷(xiāo)毀的時(shí)候，會(huì)使用beforeDestroy與destroyed進(jìn)行銷(xiāo)毀

beforeDestroy（）（重要）

當(dāng)使用beforeDestroy時(shí)，此時(shí)Vue實(shí)例還未完全銷(xiāo)毀，vm中的 data、methods、指令等還都處于可用狀態(tài)。但此時(shí)修改數(shù)據(jù)已經(jīng)不會(huì)對(duì)頁(yè)面進(jìn)行更新。通常在此階段進(jìn)行關(guān)閉定時(shí)器、取消訂閱信息、解綁自定義事件等操作。在這8個(gè)生命周期函數(shù)中，beforeDestroy與mounted使用較多。