快捷導(dǎo)航

詳細(xì)聊聊Vue生命周期的那些事

更新時間：2021年09月26日 08:55:00 作者：_啊嗚

這篇文章主要給大家介紹了關(guān)于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會接觸到生命周期的問題,但對于每個鉤子函數(shù)都做了什么,應(yīng)用場景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下

前言

如今學(xué)習(xí)Vue的人越來越多了，Vue框架或React框架的學(xué)習(xí)也成為開發(fā)了前端開發(fā)人員的必備技能，今天我們就來聊聊Vue中的生命周期函數(shù)，Vue中生命周期函數(shù)的參考價值很高，讓我們來一起認(rèn)識它吧~

一、Vue2中的生命周期

實(shí)例的生命周期

在介紹生命周期之前，我們需要知道在Vue中要渲染一塊頁面內(nèi)容的時候，會有下面這幾個過程：

解析語法生成 AST。
根據(jù) AST 結(jié)果，完成 data 數(shù)據(jù)初始化。
根據(jù) AST 結(jié)果和 data 數(shù)據(jù)綁定情況，生成虛擬 DOM。
將虛擬 DOM 生成真正的 DOM 插入到頁面中，此時頁面會被渲染。

當(dāng)我們綁定的數(shù)據(jù)進(jìn)行更新的時候，又會產(chǎn)生以下這些過程：

框架接收到數(shù)據(jù)變更的事件，根據(jù)數(shù)據(jù)生成新的虛擬 DOM 樹。比較新舊兩棵虛擬 DOM 樹，得到差異。
把差異應(yīng)用到真正的 DOM 樹上，即根據(jù)差異來更新頁面內(nèi)容。

當(dāng)我們清空頁面內(nèi)容時，還有：

注銷實(shí)例，清空頁面內(nèi)容，移除綁定事件、監(jiān)聽器等。

Vue為實(shí)例提供的生命周期函數(shù)一共有8個：

beforeCreate(): 初始化實(shí)例前，data、methods等不可獲取——1之后，2之前
created():實(shí)例化初始化完成，此時可獲取data里數(shù)據(jù)和methods事件——2之后，3之前
beforeMount():虛擬DOM創(chuàng)建完成，此時未掛載到頁面中，vm.$el可獲取未掛載模板——3之后，4之前
mounted():數(shù)據(jù)綁定完成，真實(shí)DOM已掛載到頁面，vm.$el可獲取真實(shí)DOM——4之后
beforeUpdate():數(shù)據(jù)更新，DOM Diff得到差異，未更新到頁面——5之后，6之前
updated():數(shù)據(jù)更新，頁面也已更新——6之后
beforeDestroy():實(shí)例銷毀前——7之前
destroyed():實(shí)例銷毀完成——7之后

關(guān)于實(shí)例的生命周期，大家還可以參考官方的圖例

其它生命周期鉤子

其它的生命周期函數(shù)還有activated(), deactivated(), errorCaptured()

keep-alive獨(dú)有的生命周期分別為activated和deactivated。

用keep-alive包裹的組件在切換時不會進(jìn)行銷毀，而是緩存在內(nèi)存中并執(zhí)行deactived鉤子函數(shù)，命中緩存渲染后會執(zhí)行activated鉤子函數(shù)

errorCaptured()鉤子當(dāng)在子組件內(nèi)捕獲到錯誤時會調(diào)用這個鉤子函數(shù)。

二、Vue3中的生命周期

Vue3中的生命周期在使用Options API和Composition API會有所不同。

Options API生命周期

beforeDestroy改為beforeUnmount
destroyed改為unmounted

尤大大為什么要把他改成這樣，他的回復(fù)是這很大程度上是為了更好的命名約定，對應(yīng)的中文正是卸載組件和前面的掛載組件契合不少。

其它沿用Vue2生命周期

Composition API生命周期

在Composition API中使用鉤子函數(shù)，我們只需要在鉤子函數(shù)前面添加“on”,并在setup函數(shù)內(nèi)部即可,它就會變成這樣👇

我們只需要引入這些鉤子函數(shù)就可以使用啦

Vue3的鉤子函數(shù)如下：

onBeforemount()
onMounted()
onBeforeUpdate()
onUpdated()
onBeforeUnmount()
onUnmounted()
onActivated()
onDeactivated()
onErrorCaptured()

如果你注意觀察，你會發(fā)現(xiàn)兩個生命周期函數(shù)消失了，beforeCreate()和created()不會出現(xiàn)在Composition API中，我們有setup()方法即可，setup()方法出現(xiàn)在beforeCreate()和created()之間。

兩個新的Vue3生命周期函數(shù)

onRenderTracked()：第一次在render函數(shù)中訪問反應(yīng)性依賴項(xiàng)時，將調(diào)用此函數(shù)，當(dāng)我們想查看正在跟蹤哪些依賴項(xiàng)時，鉤子很有用，對調(diào)式很有作用。
onRenderTriggered():當(dāng)觸發(fā)新渲染時，將調(diào)用此選項(xiàng)，允許檢查哪個依賴項(xiàng)觸發(fā)了要重新渲染的組件。