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

(資料圖片僅供參考)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

組合式API生命周期

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

我們上面提及到一個(gè)組合式API中的鉤子函數(shù)都是可以被多次定義，那意義是什么呢？其實(shí)很多時(shí)候我們是有這種需求的，我們前面的文章中提及到過 我們的Vue3的組合式API就是具有更高的可維護(hù)性，每個(gè)邏輯都是單獨(dú)的代碼塊，那如果我們?cè)陧撁娉跏蓟瓿傻你^子函數(shù)中需呀做兩個(gè)邏輯層面的處理呢？那就需要我們?cè)诓煌倪壿媽用娓髯跃帉?onMounted 函數(shù)！我們先來嘗試一下組合API中的鉤子函數(shù)的寫法吧！

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

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

寫在最后

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

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

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

關(guān)鍵詞：