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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供西區(qū)企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為西區(qū)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

生命周期鉤子函數(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)表。

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)被掛載。(不包含異步組件或 樹內(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í)例是 緩存樹的一部分，當(dāng)組件被插入到 DOM 中時(shí)調(diào)用。這個(gè)鉤子在服務(wù)端渲染時(shí)不會(huì)被調(diào)用。

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

組合式API生命周期

我們都知道生命周期函數(shù)在我們的開發(fā)中很有必要，那在我們組合式API中如何使用這些鉤子函數(shù)呢？其實(shí)很簡(jiǎn)單只需要記住我們?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ù)都是可以被多次定義的。

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

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

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')
})

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