一起來學習Vue的生命週期

2022-02-21 19:00:10

生命週期

生命週期的簡單介紹

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使用較多。