Vue3中的生命周期函數(shù)有哪些

本篇內(nèi)容介紹了“Vue3中的生命周期函數(shù)有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

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

注意：避免用箭頭函數(shù)來定義生命周期鉤子，因為如果這樣的話你將無法在函數(shù)中通過 this 獲取組件實例。下面是借助官網(wǎng)的一張圖；實例生命周期的圖標(biāo)表。

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ù)都是可以被多次定義的。

注意我們前面說的直接加上 on 即可使用也是不嚴(yán)謹(jǐn)?shù)?，我們有兩個特殊的，就是我們的銷毀前后的鉤子函數(shù)發(fā)生了更改，beforeDestroy=》onBoreUnmount、destroyed=》onUnmounted；

我們上面提及到一個組合式API中的鉤子函數(shù)都是可以被多次定義，那意義是什么呢？其實很多時候我們是有這種需求的，我們前面的文章中提及到過 我們的Vue3的組合式API就是具有更高的可維護(hù)性，每個邏輯都是單獨的代碼塊，那如果我們在頁面初始化完成的鉤子函數(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>

“Vue3中的生命周期函數(shù)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！