Vue的生命周期是什么

本篇內容主要講解“Vue的生命周期是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue的生命周期是什么”吧!

生命周期

生命周期的簡單介紹

1.生命周期又叫做：生命周期回調函數、生命周期函數、生命周期鉤子。

2.生命周期是：Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。

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

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

在Vue官網教學中，Vue實例=>實例生命周期鉤子中列舉了8個生命周期函數

分別是：

1.beforeCreate()

2.created()

3.beforeMount()

4.mounted()（重點）

5.beforeUpdate()

6.updated()

7.beforeDestroy() （重點）

8.destroyed()

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

beforeCreate與created

beforeCreate（）

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

created（）

當使用 created時，由于已經完成了創建，因此可以通過vm訪問到data中的數據、methods中的方法。

beforeMount與mounted

beforeMount（）

當使用 beforeMount時，由于還未完成掛載，因此此時頁面呈現的內容都是未經Vue編譯的DOM結構，并且在此時對DOM的所有操作最終都不奏效。不奏效的原因是當運行到mounted時，系統會將內存中的虛擬DOM轉為真實DOM插入頁面，因此修改的內容會被覆蓋。

mounted（）（重要）

當使用mounted時，此時已經完成掛載，頁面呈現的內容會變成經過Vue編譯的DOM，同時此時對DOM的操作均有效。當運行到這時，初始化的過程就結束了。一般在此進行如下操作：開啟定時器、發送網絡請求、訂閱消息等初始化操作。

beforeUpdate與updated

數據發生變化時，會使用beforeUpdate與updated進行更新

beforeUpdate（）

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

updated（）

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

beforeDestroy與destroyed

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

beforeDestroy（）（重要）

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

destroyed（）

當使用destroyed時，Vue實例徹底銷毀。

到此，相信大家對“Vue的生命周期是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！