前言

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

一、Vue2中的生命周期

實例的生命周期

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

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

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

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

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

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

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

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

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

其它生命周期鉤子

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

keep-alive獨有的生命周期分別為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ù)如下：

1. onBeforemount()
2. onMounted()
3. onBeforeUpdate()
4. onUpdated()
5. onBeforeUnmount()
6. onUnmounted()
7. onActivated()
8. onDeactivated()
9. onErrorCaptured()

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

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

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

最后

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

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

最新評論