前言

在學(xué)習(xí) Vue 的過(guò)程中，我逐漸意識(shí)到一個(gè)問(wèn)題：**為什么同樣是寫數(shù)據(jù)、改數(shù)據(jù)，有些代碼只能寫在某些地方？為什么定時(shí)器、請(qǐng)求、事件綁定如果位置不對(duì)，就會(huì)出 bug？**答案幾乎都指向同一個(gè)核心概念——Vue 生命周期。

Vue 生命周期并不是抽象的“理論名詞”，而是 Vue 在實(shí)例從創(chuàng)建到銷毀的整個(gè)過(guò)程中，在關(guān)鍵時(shí)間點(diǎn)自動(dòng)幫我們調(diào)用的一組函數(shù)。這些函數(shù)有固定的名字、固定的調(diào)用時(shí)機(jī)，而我們能做的，就是在合適的鉤子中寫合適的代碼。

一、生命周期的本質(zhì)：Vue 在“關(guān)鍵時(shí)刻”幫你調(diào)用函數(shù)

從第一個(gè)示例可以看到，生命周期也被稱為生命周期回調(diào)函數(shù)、生命周期函數(shù)或生命周期鉤子。它的本質(zhì)并不復(fù)雜：

Vue 在內(nèi)部流程的某些關(guān)鍵階段，自動(dòng)調(diào)用我們提前寫好的函數(shù)1.引出生命周期

有幾個(gè)非常重要的特性需要先明確：

• 生命周期函數(shù)的名字不能隨便改
• 生命周期函數(shù)內(nèi)部的代碼由開(kāi)發(fā)者決定
• 生命周期函數(shù)中的 this 永遠(yuǎn)指向當(dāng)前的 Vue 實(shí)例（vm）

也正因?yàn)?this 指向 vm，我們才能在生命周期中自由訪問(wèn) data、methods、computed 等內(nèi)容。

二、mounted：最常用、也最容易被誤用的生命周期

在第一個(gè)示例中，頁(yè)面上有一段非常直觀的動(dòng)畫效果：文字透明度不斷降低，又循環(huán)恢復(fù)。這個(gè)效果并不是通過(guò)操作 DOM 實(shí)現(xiàn)的，而是通過(guò)修改響應(yīng)式數(shù)據(jù) opacity 來(lái)完成的1.引出生命周期。

關(guān)鍵代碼寫在了 mounted() 中：

mounted() {
  setInterval(() => {
    this.opacity -= 0.01;
    if (this.opacity <= 0) {
      this.opacity = 1;
    }
  }, 16)
}

之所以把定時(shí)器寫在 mounted，原因非常明確：

• 在 mounted 之前，模板還沒(méi)有真正渲染成 DOM
• 只有在 mounted 執(zhí)行時(shí)，真實(shí) DOM 已經(jīng)掛載完成
• 所有依賴頁(yè)面結(jié)構(gòu)、DOM 或視圖更新的邏輯，都應(yīng)該放在這里

需要特別注意的是：
mounted 只會(huì)在“初次掛載”時(shí)調(diào)用一次，后續(xù)數(shù)據(jù)變化引起的重新渲染，并不會(huì)再次觸發(fā) mounted，而是走更新相關(guān)的生命周期。

三、為什么要學(xué) beforeDestroy？——生命周期的“收尾階段”

第二個(gè)示例在第一個(gè)基礎(chǔ)上進(jìn)一步完善了邏輯，引出了一個(gè)非?，F(xiàn)實(shí)的問(wèn)題：
**定時(shí)器什么時(shí)候清？Vue 實(shí)例銷毀后會(huì)發(fā)生什么？**1.總結(jié)生命周期

在這個(gè)例子中，點(diǎn)擊“點(diǎn)我停止”按鈕，會(huì)調(diào)用：

this.$destroy();

這行代碼會(huì)手動(dòng)銷毀當(dāng)前 Vue 實(shí)例，而在銷毀之前，Vue 會(huì)調(diào)用 beforeDestroy()。

beforeDestroy() {
  clearInterval(this.timer);
}

這正是生命周期的收尾價(jià)值所在。

在實(shí)際開(kāi)發(fā)中：

• mounted 負(fù)責(zé)“初始化”
• beforeDestroy 負(fù)責(zé)“清理善后”

例如：

• 清除定時(shí)器
• 解綁自定義事件
• 取消消息訂閱
• 關(guān)閉 WebSocket 連接

如果不在銷毀前清理這些內(nèi)容，就會(huì)導(dǎo)致內(nèi)存泄漏，甚至邏輯混亂。

另外，示例中還明確指出：

• Vue 實(shí)例銷毀后，開(kāi)發(fā)者工具中將不再顯示該實(shí)例
• Vue 的自定義事件會(huì)失效
• 原生 DOM 事件依然存在
• 在 beforeDestroy 中修改數(shù)據(jù)是沒(méi)有意義的，因?yàn)楦铝鞒桃呀?jīng)不會(huì)再觸發(fā)了1.總結(jié)生命周期

四、完整生命周期流程：從 beforeCreate 到 destroyed

第三個(gè)示例是對(duì) Vue 生命周期最系統(tǒng)的一次演示，它幾乎覆蓋了所有常見(jiàn)的生命周期鉤子，并通過(guò) console.log 清晰地展示了調(diào)用順序2.分析生命周期。

beforeCreate

這是 Vue 實(shí)例剛被創(chuàng)建時(shí)調(diào)用的鉤子：

• data 尚未初始化
• methods 尚未初始化
• 訪問(wèn) this.n 得到的是 undefined

這說(shuō)明：
beforeCreate 幾乎不適合寫業(yè)務(wù)代碼

created

在這個(gè)階段：

• data 已經(jīng)變成響應(yīng)式數(shù)據(jù)
• methods 已經(jīng)可以正常調(diào)用
• 但 DOM 還沒(méi)有生成

如果你只關(guān)心數(shù)據(jù)、而不依賴頁(yè)面結(jié)構(gòu)，created 是一個(gè)可以使用的階段。

beforeMount

此時(shí)：

• 模板已經(jīng)編譯完成
• 虛擬 DOM 已經(jīng)生成
• 但還沒(méi)有掛載到頁(yè)面上

打印 this.$el 會(huì)發(fā)現(xiàn)，它還不是最終呈現(xiàn)在頁(yè)面中的 DOM。

mounted（最重要）

這是生命周期中使用頻率最高的一個(gè)鉤子：

• 虛擬 DOM 已轉(zhuǎn)為真實(shí) DOM
• 頁(yè)面已經(jīng)完成首次渲染
• $el 就是頁(yè)面中真實(shí)存在的 DOM

幾乎所有涉及 DOM、視圖、第三方庫(kù)初始化的邏輯，都應(yīng)該寫在這里。

beforeUpdate / updated

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)：

• beforeUpdate 在視圖更新之前觸發(fā)
• updated 在視圖更新之后觸發(fā)

它們常用于：

• 調(diào)試
• 對(duì)比更新前后的狀態(tài)
• 少量特殊場(chǎng)景下的 DOM 同步操作

但在實(shí)際業(yè)務(wù)中，不建議濫用更新鉤子。

beforeDestroy / destroyed

這是 Vue 實(shí)例生命周期的終點(diǎn)：

• beforeDestroy：還能訪問(wèn) data 和 methods
• destroyed：實(shí)例已經(jīng)徹底不可用

一般來(lái)說(shuō)，真正有價(jià)值的是 beforeDestroy，而 destroyed 很少使用。

五、從“記生命周期”到“會(huì)用生命周期”

通過(guò)這三段代碼可以清楚地看到，生命周期并不是讓人死記硬背的流程圖，而是一套明確解決實(shí)際問(wèn)題的時(shí)間節(jié)點(diǎn)機(jī)制：

• 初始化邏輯 → mounted
• 數(shù)據(jù)準(zhǔn)備 → created
• DOM 操作 → mounted
• 更新監(jiān)聽(tīng) → updated
• 清理資源 → beforeDestroy

當(dāng)我真正理解這些鉤子的調(diào)用時(shí)機(jī)和設(shè)計(jì)目的之后，很多之前“寫著寫著就出 bug”的問(wèn)題，都會(huì)自然消失。

Vue 生命周期的學(xué)習(xí)重點(diǎn)，從來(lái)不是“有多少個(gè)鉤子”，而是——
在對(duì)的時(shí)間，做對(duì)的事。

六、總結(jié)

Vue生命周期鉤子為開(kāi)發(fā)者提供了在特定階段介入實(shí)例生命周期的能力。通過(guò)合理使用這些鉤子，我們可以：

• 在正確時(shí)機(jī)執(zhí)行初始化操作
• 有效管理資源，防止內(nèi)存泄漏
• 優(yōu)化應(yīng)用性能
• 更好地理解和控制應(yīng)用狀態(tài)

掌握生命周期不僅有助于編寫更健壯的Vue應(yīng)用，也是深入理解Vue響應(yīng)式系統(tǒng)工作原理的關(guān)鍵。建議開(kāi)發(fā)者在實(shí)際項(xiàng)目中多實(shí)踐、多觀察，逐步形成對(duì)生命周期各階段的直觀感受。

到此這篇關(guān)于Vue生命周期之從創(chuàng)建到銷毀的文章就介紹到這了,更多相關(guān)Vue生命周期創(chuàng)建到銷毀內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論