這篇文章將帶領(lǐng)大家學(xué)習(xí)Vue3 組合式API的生命周期鉤子函數(shù)，掌握鉤子函數(shù)讓我們開發(fā)過程中有機會在特定的階段運行自己的邏輯，希望對大家有所幫助！

(資料圖片僅供參考)

生命周期鉤子函數(shù)

每個 Vue 組件實例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實例到 DOM，以及在數(shù)據(jù)改變時更新 DOM。在此過程中，它也會運行被稱為生命周期鉤子的函數(shù)，讓開發(fā)者有機會在特定階段運行自己的代碼。

在我們的Vue2中，所有生命周期鉤子函數(shù)的 this 上下文都會自動指向當(dāng)前調(diào)用它的組件實例。

注意：避免用箭頭函數(shù)來定義生命周期鉤子，因為如果這樣的話你將無法在函數(shù)中通過 this 獲取組件實例。下面是借助官網(wǎng)的一張圖；實例生命周期的圖標(biāo)表?！鞠嚓P(guān)推薦：vuejs視頻教程、web前端開發(fā)】

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

created在組件實例處理完所有與狀態(tài)相關(guān)的選項后調(diào)用。當(dāng)這個鉤子被調(diào)用時，以下內(nèi)容已經(jīng)設(shè)置完成：響應(yīng)式數(shù)據(jù)、計算屬性、方法和偵聽器。然而，此時掛載階段還未開始，因此 $el 屬性仍不可用。

beforeMount在組件被掛載之前調(diào)用。當(dāng)這個鉤子被調(diào)用時，組件已經(jīng)完成了其響應(yīng)式狀態(tài)的設(shè)置，但還沒有創(chuàng)建 DOM 節(jié)點。它即將首次執(zhí)行 DOM 渲染過程。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

mounted在組件被掛載之后調(diào)用。組件在以下情況下被視為已掛載：所有同步子組件都已經(jīng)被掛載。(不包含異步組件或 <Suspense>樹內(nèi)的組件)其自身的 DOM 樹已經(jīng)創(chuàng)建完成并插入了父容器中。注意僅當(dāng)根容器在文檔中時，才可以保證組件 DOM 樹也在文檔中。這個鉤子通常用于執(zhí)行需要訪問組件所渲染的 DOM 樹相關(guān)的副作用，或是在服務(wù)端渲染應(yīng)用中用于確保 DOM 相關(guān)代碼僅在客戶端被調(diào)用。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

beforeUpdate在組件即將因為一個響應(yīng)式狀態(tài)變更而更新其 DOM 樹之前調(diào)用。這個鉤子可以用來在 Vue 更新 DOM 之前訪問 DOM 狀態(tài)。在這個鉤子中更改狀態(tài)也是安全的。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

updated在組件因為一個響應(yīng)式狀態(tài)變更而更新其 DOM 樹之后調(diào)用。父組件的更新鉤子將在其子組件的更新鉤子之后調(diào)用。這個鉤子會在組件的任意 DOM 更新后被調(diào)用，這些更新可能是由不同的狀態(tài)變更導(dǎo)致的。如果你需要在某個特定的狀態(tài)更改后訪問更新后的 DOM，請使用 nextTick() 作為替代。這個鉤子在服務(wù)端渲染時不會被調(diào)用。不要在 updated 鉤子中更改組件的狀態(tài)，這可能會導(dǎo)致無限的更新循環(huán)！

beforeUnmount（Vue3） 在一個組件實例被卸載之前調(diào)用。當(dāng)這個鉤子被調(diào)用時，組件實例依然還保有全部的功能。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

unmounted在一個組件實例被卸載之后調(diào)用。一個組件在以下情況下被視為已卸載：其所有子組件都已經(jīng)被卸載。所有相關(guān)的響應(yīng)式作用 (渲染作用以及 setup() 時創(chuàng)建的計算屬性和偵聽器) 都已經(jīng)停止。可以在這個鉤子中手動清理一些副作用，例如計時器、DOM 事件監(jiān)聽器或者與服務(wù)器的連接。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

activated若組件實例是 <KeepAlive>緩存樹的一部分，當(dāng)組件被插入到 DOM 中時調(diào)用。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

deactivated若組件實例是 <KeepAlive>緩存樹的一部分，當(dāng)組件從 DOM 中被移除時調(diào)用。這個鉤子在服務(wù)端渲染時不會被調(diào)用。

組合式API生命周期

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

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

<template>    <div>    </div></template><script setup>import { onBeforeMount, onMounted } from "vue";onMounted(() => {    console.log("這是測試1")})onMounted(() => {    console.log("這是測試2")})onBeforeMount(() => {    console.log("這是測試3")})onBeforeMount(() => {    console.log("這是測試4")})</script>

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

寫在最后

大家看完本篇文章你對Vue的生命周期函數(shù)是否有了更深入的了解呢？對組合式API的鉤子函數(shù)用法是否掌握了呢？并且在我們組合式API中的鉤子函數(shù)是可以被定義多次的哦，更能夠體現(xiàn)出我們組合式API的可維護性擴展性；當(dāng)然本篇文章中涼哥只帶領(lǐng)大家嘗試了兩個鉤子函數(shù)，其余的鉤子函數(shù)伙伴們可以自行嘗試哦！各位小伙伴讓我們 let’s coding！

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

以上就是深入淺析Vue3中的生命周期函數(shù)的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：