深入淺析Vue3中的生命週期函數

這篇文章將帶領大家學習Vue3 組合式API的生命週期鉤子函數，掌握鉤子函數讓我們開發過程中有機會在特定的階段運行自己的邏輯，希望對大家有所幫助！

生命週期鉤子函數

每個Vue 元件實例在建立時都需要經歷一系列的初始化步驟，例如設定好資料偵聽，編譯模板，掛載實例到DOM，以及在資料改變時更新DOM。在此過程中，它也會運行被稱為生命週期鉤子的函數，讓開發者有機會在特定階段運行自己的程式碼。

在我們的Vue2中，所有生命週期鉤子函數的 this 上下文都會自動指向目前呼叫它的元件實例。

注意：避免用箭頭函數來定義生命週期鉤子，因為如果這樣的話你將無法在函數中透過 this 取得元件實例。下面是藉助官網的一張圖；實例生命週期的圖示表。 【相關推薦：vuejs影片教學、web前端開發】

beforeCreate
# 會在實例初始化完成、props 解析之後、data() 和computed 等選項處理之前立即呼叫。組合式 API 中的 setup() 鉤子會在所有選項式 API 鉤子之前調用，beforeCreate() 也不例外。

created
在元件實例處理完所有與狀態相關的選項後呼叫。當這個鉤子被呼叫時，以下內容已經設定完成：響應式資料、計算屬性、方法和偵聽器。然而，此時掛載階段尚未開始，因此 $el 屬性仍不可用。

beforeMount
在元件被掛載之前呼叫。當這個鉤子被呼叫時，元件已經完成了其響應式狀態的設置，但還沒有創建 DOM 節點。它即將首次執行 DOM 渲染過程。這個鉤子在服務端渲染時不會被呼叫。

mounted
在元件被掛載之後呼叫。元件在下列情況下被視為已掛載：所有同步子元件都已經被掛載。 (不包含非同步元件或 <suspense></suspense> 樹內的元件)其自身的 DOM 樹已經建立完成並插入了父容器中。注意僅當根容器在文件中時，才可以確保元件 DOM 樹也在文件中。這個鉤子通常用於執行需要存取元件所渲染的 DOM 樹相關的副作用，或是在服務端渲染應用中用於確保 DOM 相關程式碼僅在客戶端被呼叫。這個鉤子在服務端渲染時不會被呼叫。

beforeUpdate
在元件即將因為一個響應式狀態變更而更新其 DOM 樹之前呼叫。這個鉤子可以用來在 Vue 更新 DOM 之前存取 DOM 狀態。在這個鉤子中更改狀態也是安全的。這個鉤子在服務端渲染時不會被呼叫。

updated
在元件因為一個響應式狀態變更而更新其 DOM 樹之後呼叫。父元件的更新鉤子將在其子元件的更新鉤子之後呼叫。這個鉤子會在元件的任意 DOM 更新後被調用，這些更新可能是由不同的狀態變更導致的。如果你需要在某個特定的狀態變更後存取更新後的 DOM，請使用 nextTick() 作為替代。這個鉤子在服務端渲染時不會被呼叫。 不要在 updated 鉤子中更改元件的狀態，這可能會導致無限的更新循環！

beforeUnmount（Vue3）
在一個元件實例被卸載之前呼叫。當這個鉤子被呼叫時，元件實例依然還保有全部的功能。這個鉤子在服務端渲染時不會被呼叫。

unmounted
在一個元件實例被卸載之後呼叫。一個元件在以下情況下被視為已卸載：其所有子元件都已經被卸載。所有相關的響應式作用 (渲染作用以及 setup() 時所建立的計算屬性和偵聽器) 都已經停止。在這個鉤子中可以手動清理一些副作用，例如計時器、DOM 事件監聽器或與伺服器的連線。這個鉤子在服務端渲染時不會被呼叫。

activated
若元件實例是<keepalive></keepalive> 快取樹的一部分，當元件插入DOM 時調用。這個鉤子在服務端渲染時不會被呼叫。

deactivated
若元件實例是 <keepalive></keepalive> 快取樹的一部分，當元件從 DOM 移除時呼叫。這個鉤子在服務端渲染時不會被呼叫。

---

組合式API生命週期

#我們都知道生命週期函數在我們的開發中很有必要，那在我們組合式API中如何使用這些鉤子函數？其實很簡單只需要記住我們在組合式API中除了beforeCreate、created 兩個函數外其他的鉤子函數前面加上on 在setup中即可使用，至於beforeCreate、created 兩個函數在組合式API中就不存在了，因為我們在setup入口函數中的執行都是創建前；我們的請求可以放在onMounted 函數中，也是我們使用的比較多的鉤子函數；並且我們在組合式API中的鉤子函數都是可以被多次定義的。

注意我們前面說的直接加上on 即可使用也是不嚴謹的，我們有兩個特殊的，就是我們的銷毀前後的鉤子函數發生了更改，beforeDestroy=》onBoreUnmount、 destroyed=》onUnmounted；

我們上面提及到一個組合式API中的鉤子函數都是可以被多次定義，那意義是什麼呢？其實很多時候我們是有這種需求的，我們前面的文章中提及到過我們的Vue3的組合式API就是具有更高的可維護性，每個邏輯都是單獨的程式碼區塊，那如果我們在頁面初始化完成的鉤子函數中需呀做兩個邏輯層面的處理呢？那就需要我們在不同的邏輯層面各自編寫 onMounted 函數！我們先來試試組合API中的鉤子函數的寫法吧！

<template>
    <div>

    </div>
</template>

<script setup>
import { onBeforeMount, onMounted } from &#39;vue&#39;;
onMounted(() => {
    console.log(&#39;这是测试1&#39;)
})
onMounted(() => {
    console.log(&#39;这是测试2&#39;)
})

onBeforeMount(() => {
    console.log(&#39;这是测试3&#39;)
})
onBeforeMount(() => {
    console.log(&#39;这是测试4&#39;)
})
</script>

這裡就只為大家展示 onMounted、onBeforeMount 兩個鉤子函數的用法了，其他的亦是如此，大家可以後面自己嘗試一下！

---

寫在最後

大家看完這篇文章你對Vue的生命週期函數是否有了更深入的了解呢？組合式API的鉤子函數用法是否掌握了呢？而在我們組合式API中的鉤子函數是可以被定義多次的哦，更能夠體現出我們組合式API的可維護性擴展性；當然本篇文章中涼哥只帶領大家嘗試了兩個鉤子函數，其餘的鉤子函數夥伴們可以自行嘗試！各位小夥伴讓我們 let’s coding！

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是深入淺析Vue3中的生命週期函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！