Vue生命周期，本質(zhì)是Vue實(shí)例從創(chuàng)建到銷毀的完整過程，每個(gè)階段都會(huì)觸發(fā)對(duì)應(yīng)的鉤子函數(shù)（生命周期鉤子），開發(fā)者可通過這些鉤子，在不同時(shí)機(jī)執(zhí)行所需邏輯（如初始化數(shù)據(jù)、操作DOM、清理資源等）。核心分為「創(chuàng)建、掛載、更新、銷毀」四大階段，Vue2與Vue3的生命周期整體邏輯一致，但鉤子名稱、使用方式有差異，以下分版本詳細(xì)解析，兼顧理論與實(shí)操，讓新手也能快速上手、高效運(yùn)用。

一、先明確核心：生命周期四大階段

無論Vue2還是Vue3，生命周期都圍繞「實(shí)例從生到死」展開，四大核心階段不可逆，每個(gè)階段的鉤子函數(shù)只執(zhí)行一次（更新階段除外，可多次觸發(fā)）：

1. 創(chuàng)建階段：實(shí)例從無到有，初始化數(shù)據(jù)、配置，未掛載DOM；
2. 掛載階段：實(shí)例掛載到DOM樹上，生成真實(shí)DOM，可開始操作DOM；
3. 更新階段：響應(yīng)式數(shù)據(jù)發(fā)生變化，觸發(fā)DOM重新渲染，可多次執(zhí)行；
4. 銷毀階段：實(shí)例被銷毀，清理資源，避免內(nèi)存泄漏。

二、Vue2 生命周期（選項(xiàng)式API，最常用）

Vue2使用選項(xiàng)式API，生命周期鉤子共8個(gè)，按執(zhí)行順序排列，無需額外導(dǎo)入，直接寫在組件選項(xiàng)中即可使用，每個(gè)鉤子的作用清晰，適配日常開發(fā)場景。

1. 創(chuàng)建階段（實(shí)例初始化，未掛載DOM）

核心：初始化實(shí)例、數(shù)據(jù)觀測，此時(shí)DOM尚未生成，無法操作DOM。

• beforeCreate（創(chuàng)建前） ：實(shí)例剛被創(chuàng)建，data、methods、computed等尚未初始化，無法訪問this.data、this.methods，幾乎不用（僅特殊場景初始化非響應(yīng)式數(shù)據(jù)）。
• created（創(chuàng)建后） ：實(shí)例創(chuàng)建完成，data、methods、computed已初始化，可訪問響應(yīng)式數(shù)據(jù)，但DOM未掛載（$el為undefined），常用場景：發(fā)起初始化接口請(qǐng)求、初始化數(shù)據(jù)處理。

2. 掛載階段（實(shí)例掛載到DOM，可操作DOM）

核心：將實(shí)例渲染到頁面，生成真實(shí)DOM，此時(shí)可正常操作DOM。

• beforeMount（掛載前） ：模板已編譯完成，但尚未掛載到DOM樹上，$el已存在（虛擬DOM），但真實(shí)DOM未生成，仍無法操作真實(shí)DOM。
• mounted（掛載后） ：實(shí)例已完全掛載到DOM樹上，真實(shí)DOM已生成，可正常操作DOM（如獲取DOM元素、初始化第三方插件），是最常用的鉤子之一。

3. 更新階段（響應(yīng)式數(shù)據(jù)變化，可多次觸發(fā)）

核心：當(dāng)data中的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，觸發(fā)該階段，僅更新變化的部分，無需重新渲染整個(gè)頁面。

• beforeUpdate（更新前） ：響應(yīng)式數(shù)據(jù)已變化，但DOM尚未重新渲染，可獲取變化前的DOM狀態(tài)，常用場景：更新前保存DOM原有狀態(tài)。
• updated（更新后） ：DOM已根據(jù)變化后的響應(yīng)式數(shù)據(jù)重新渲染，可獲取更新后的DOM狀態(tài)，注意：避免在該鉤子中修改響應(yīng)式數(shù)據(jù)（會(huì)導(dǎo)致無限循環(huán)更新）。

4. 銷毀階段（實(shí)例銷毀，清理資源）

核心：實(shí)例被銷毀（如組件卸載），需清理資源，避免內(nèi)存泄漏。

• beforeDestroy（銷毀前） ：實(shí)例即將被銷毀，仍可訪問實(shí)例的所有屬性和方法，常用場景：清理資源（清除定時(shí)器、取消接口請(qǐng)求、解綁事件監(jiān)聽）。
• destroyed（銷毀后） ：實(shí)例已完全銷毀，所有屬性、方法、事件監(jiān)聽均被解綁，DOM仍存在（需手動(dòng)清理），幾乎不用（清理工作優(yōu)先在beforeDestroy中完成）。

Vue2 生命周期執(zhí)行順序（必記）

beforeCreate → created → beforeMount → mounted → （數(shù)據(jù)變化）beforeUpdate → updated → （實(shí)例銷毀）beforeDestroy → destroyed

三、Vue3 生命周期（選項(xiàng)式+組合式API，推薦）

Vue3兼容Vue2的選項(xiàng)式API（生命周期用法與Vue2一致），但更推薦使用組合式API（setup語法糖），組合式API的生命周期鉤子需手動(dòng)導(dǎo)入，名稱以“on”開頭，核心邏輯與Vue2完全一致，只是使用方式更靈活、輕量化。

1. Vue3 選項(xiàng)式API（與Vue2兼容）

用法和Vue2完全一致，僅替換2個(gè)鉤子名稱（語義更準(zhǔn)確），其余鉤子功能、執(zhí)行順序完全相同：

• 用beforeUnmount 替代 Vue2 的 beforeDestroy；
• 用unmounted 替代 Vue2 的 destroyed。

<script>
export default {
  data() {
    return { count: 0 }
  },
  beforeCreate() { /* 實(shí)例創(chuàng)建前 */ },
  created() { /* 實(shí)例創(chuàng)建后 */ },
  beforeMount() { /* 掛載前 */ },
  mounted() { /* 掛載后 */ },
  beforeUpdate() { /* 更新前 */ },
  updated() { /* 更新后 */ },
  beforeUnmount() { /* 卸載前（替代beforeDestroy） */ },
  unmounted() { /* 卸載后（替代destroyed） */ }
}
</script>

2. Vue3 組合式API（setup語法糖，推薦）

組合式API的生命周期鉤子需從vue中導(dǎo)入，名稱以“on”開頭，與Vue2的鉤子一一對(duì)應(yīng)，函數(shù)式調(diào)用，更貼合組合式開發(fā)邏輯，常用鉤子如下（按執(zhí)行順序）：

• onBeforeMount：對(duì)應(yīng)Vue2的beforeMount，掛載前執(zhí)行；
• onMounted：對(duì)應(yīng)Vue2的mounted，掛載后執(zhí)行（最常用）；
• onBeforeUpdate：對(duì)應(yīng)Vue2的beforeUpdate，更新前執(zhí)行；
• onUpdated：對(duì)應(yīng)Vue2的updated，更新后執(zhí)行；
• onBeforeUnmount：對(duì)應(yīng)Vue2的beforeDestroy，卸載前執(zhí)行（最常用，清理資源）；
• onUnmounted：對(duì)應(yīng)Vue2的destroyed，卸載后執(zhí)行。

補(bǔ)充：Vue3新增2個(gè)調(diào)試用鉤子（onRenderTracked、onRenderTriggered），日常開發(fā)幾乎不用，僅用于調(diào)試響應(yīng)式數(shù)據(jù)的渲染跟蹤。

Vue3 組合式API 實(shí)操示例（setup語法糖）

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const count = ref(0)
let timer = null

// 掛載后：初始化定時(shí)器（常用場景）
onMounted(() => {
  timer = setInterval(() => {
    count.value++
  }, 1000)
})

// 卸載前：清理定時(shí)器（避免內(nèi)存泄漏，常用場景）
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

四、Vue2與Vue3生命周期核心差異（重點(diǎn)）

五、生命周期實(shí)操注意事項(xiàng)

• 操作DOM的時(shí)機(jī)：僅能在mounted（Vue2/Vue3）、updated（Vue2/Vue3）中操作真實(shí)DOM，beforeMount、beforeUpdate中無法操作（未生成/未更新）。
• 避免內(nèi)存泄漏：定時(shí)器、事件監(jiān)聽、第三方插件實(shí)例，必須在beforeDestroy（Vue2）/onBeforeUnmount（Vue3）中清理，否則會(huì)導(dǎo)致內(nèi)存泄漏。
• 接口請(qǐng)求時(shí)機(jī)：初始化請(qǐng)求可在created（Vue2）/setup中（Vue3）、mounted中發(fā)起；created中發(fā)起請(qǐng)求更早，但無法操作DOM；mounted中發(fā)起可結(jié)合DOM操作。
• 組件復(fù)用：每個(gè)組件實(shí)例的生命周期獨(dú)立執(zhí)行，互不影響，比如多個(gè)相同組件，各自的鉤子函數(shù)分別觸發(fā)。

六、總結(jié)（一句話記牢）

Vue生命周期就是“實(shí)例從創(chuàng)建到銷毀”的全過程，核心是四大階段+對(duì)應(yīng)鉤子，Vue2側(cè)重選項(xiàng)式、兼容舊項(xiàng)目，Vue3兼容選項(xiàng)式、推薦組合式，記住“掛載后操作DOM、銷毀前清理資源”，就能覆蓋90%的開發(fā)場景，新手也能快速上手。

到此這篇關(guān)于Vue生命周期速查之Vue2和Vue3鉤子全解析的文章就介紹到這了,更多相關(guān)Vue生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論