快捷導(dǎo)航

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

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

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

前言

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

一、Vue2中的生命周期

實(shí)例的生命周期

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

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

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

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

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

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

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

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

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

其它生命周期鉤子

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

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

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

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

二、Vue3中的生命周期

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

Options API生命周期

beforeDestroy改為beforeUnmount
destroyed改為unmounted

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

其它沿用Vue2生命周期

Composition API生命周期

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

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

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

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

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

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

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