每個 vue.js 生命周期掛鈎的用例是什么？

Question

所以我對 vue 的生命周期掛鈎有所了解，但對於其中一些我想不出任何真實世界的用例或應該在其中完成的示例，我認為通過找出它們的用例可能會幫助我更好地理解它們.

以下是我對他們的了解和不了解：

創建掛鈎

1. beforeCreate()：事件和生命周期已經初始化但數據還沒有反應---用例？
2. created()：您可以訪問反應性數據和事件，但模板和虛擬 DOM 尚未安裝或呈現 --- 用例：API 次調用

安裝掛鈎

1. beforeMount()：在初始渲染之前運行——用例？？
2. mounted()：你可以訪問反應組件、模板和呈現的 DOM --- 用例：修改 DOM

更新掛鈎

1. beforeUpdate()：在數據更改之后和 DOM 重新呈現之前運行——用例？
2. updated()：在數據更改和 DOM 重新呈現后運行——用例？？

破壞鈎子

1. beforeDestroy()：在拆卸之前運行 --- 用例：清理以避免 memory 泄漏
2. destroyed()：在拆除后運行——用例？？

提前感謝任何幫助我更好地理解這些概念的人；）

Answer 1

根據官方 VueJS 網站：

每個 Vue 實例在創建時都會經歷一系列初始化步驟——例如，它需要設置數據觀察、編譯模板、將實例掛載到 DOM 以及在數據發生變化時更新 DOM。 在此過程中，它還運行稱為生命周期掛鈎的功能，讓用戶有機會在特定階段添加自己的代碼。

考慮到這一點，我們有：

創建前

beforeCreate掛鈎在組件初始化時運行。 數據還沒有反應，事件還沒有設置。

用法

當您需要某種不需要分配給數據的邏輯/API 調用時，使用beforeCreate掛鈎很有用。 因為如果我們現在要為數據分配一些東西，一旦 state 被初始化，它就會丟失。

創建

您可以訪問使用創建的掛鈎激活的反應性數據和事件。 模板和虛擬 DOM 尚未安裝或渲染。

用法

在處理讀取/寫入反應數據時，使用created的方法很有用。 例如，如果您想撥打 API 電話，然后存儲該值，這就是執行此操作的地方。

---

以上被稱為creation掛鈎，而不是mounting掛鈎。

安裝掛鈎通常是最常用的掛鈎。 它們允許您在第一次渲染之前和之后立即訪問您的組件。 但是，它們不會在服務器端呈現期間運行。

掛載前

beforeMount掛鈎在初始渲染發生之前和模板或渲染函數編譯之后運行。

用法

這是您應該執行 API 調用的最后一步，因為它就在創建之后就沒有必要了，因為它們可以訪問相同的組件變量。

安裝

在掛載的鈎子中，您將可以完全訪問反應式組件、模板和呈現的 DOM（通過 this.$el）。

用法

使用 mounted 修改 DOM——特別是在集成非 Vue 庫時。

---

還有一些鈎子，稱為updating鈎子。

每當組件使用的響應式屬性更改或其他原因導致它重新渲染時，都會調用更新掛鈎。 它們允許您掛接到組件的監視-計算-渲染周期。

如果您需要知道組件何時重新渲染，可以使用更新掛鈎，可能用於調試或分析。

有：

更新前

beforeUpdate掛鈎在組件上的數據更改之后運行，並且更新周期開始，就在 DOM 被修補和重新呈現之前。

用法

如果您需要在組件實際呈現之前獲取組件上任何反應數據的新 state，請使用beforeUpdate 。

更新

更新的掛鈎在組件上的數據更改和 DOM 重新呈現后運行。

用法

如果需要在屬性更改后訪問 DOM，請使用 updated

---

最后但並非最不重要的是，有destruction掛鈎。

銷毀掛鈎允許您在組件被銷毀時執行操作，例如清理或分析發送。 當您的組件被拆除並從 DOM 中移除時，它們會觸發。

有：

毀壞

當您到達 destroyed hook 時，您的組件上幾乎沒有任何東西。 附着在它上面的一切都被摧毀了。

用法

如果您需要進行任何最后一分鍾的清理或通知遠程服務器組件已銷毀，請使用 destroyed

銷毀前

beforeDestroy在拆解之前被觸發。 您的組件仍將完全存在並發揮作用。

用法

如果您需要清理事件或響應式訂閱，請使用beforeDestroy 。

這是您可以進行資源管理、刪除變量和清理組件的階段。

---

請記住，這些是主要的生命周期掛鈎，還有一些其他的小掛鈎，例如activated和deactivated ，您可以查看。

這是一個鏈接，可以幫助您進一步了解。