前言

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

一、Vue2中的生命周期

實(shí)例的生命周期

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

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

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

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

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

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

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

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

1. onBeforemount()
2. onMounted()
3. onBeforeUpdate()
4. onUpdated()
5. onBeforeUnmount()
6. onUnmounted()
7. onActivated()
8. onDeactivated()
9. 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ù)中訪問反應(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ā)了要重新渲染的組件。

最后

⚽這篇文章主要介紹了Vue中的生命周期函數(shù)，相信你一定有所收獲~

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