一起來學習Vue的生命周期

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

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

生命周期

生命周期的簡單介紹

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

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

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

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

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

分別是：

1.beforeCreate()

2.created()

3.beforeMount()

4.mounted()（重點）

5.beforeUpdate()

6.updated()

7.beforeDestroy() （重點）

8.destroyed()

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

beforeCreate與created

beforeCreate（）

當使用 beforeCreate時，由于還沒完成創(chuàng)建，因此無法通過vm訪問到data中的數(shù)據(jù)、methods中的方法。

created（）

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

beforeMount與mounted

beforeMount（）

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

mounted（）（重要）

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

beforeUpdate與updated

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

beforeUpdate（）

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

updated（）

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

beforeDestroy與destroyed

當Vue實例要銷毀的時候，會使用beforeDestroy與destroyed進行銷毀

beforeDestroy（）（重要）

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