建站
咨詢
售后
建站咨詢
新聞中心
Vue 3在生命周期鉤子函數(shù)的設(shè)計(jì)方面的目標(biāo)之一是盡量減少組件狀態(tài)的管理，提高代碼的可讀性和模塊化。Vue 3 的生命周期主要圍繞著Composition API設(shè)計(jì)展開，這使得生命周期的使用更加靈活和直觀。而Vue 2在這方面的設(shè)計(jì)思想則是把不同階段所需的操作都分離出來方便維護(hù)和調(diào)試。
以下是Vue 2和 Vue 3 生命周期的對比及其詳細(xì)介紹:
一、 Vue 2 的生命周期鉤子函數(shù)
beforeCreate
在實(shí)例化之后、數(shù)據(jù)初始化之前被調(diào)用。此時(shí)模板已經(jīng)編譯成了 render 函數(shù)并且創(chuàng)建了虛擬 DOM，但是還未完成注入 data 和 computed 屬性，也未執(zhí)行方法或處理事件。因此，如果再 Vue 實(shí)例里需要自定義一些 property 屬性或者使用 $store 等全局變量，那么這個(gè)時(shí)機(jī)就非常適合，否則可能會(huì)報(bào)錯(cuò)。
created
在實(shí)例化后數(shù)據(jù)初始化后被調(diào)用。在 created 階段，data 和 computed 已經(jīng)被注入而 methods、watcher、events 等事件以及 template/render 函數(shù)都還沒發(fā)生過回調(diào)調(diào)用。 Vue 實(shí)例已經(jīng)被完全渲染出來，DOM 也已經(jīng)渲染好了，我們可以在這個(gè)階段綁定監(jiān)聽器，但是只能對狀態(tài)做出反應(yīng)，不能改變狀態(tài)。你的組件實(shí)例現(xiàn)在已經(jīng)準(zhǔn)備好了，可以被掛載到 DOM 樹上。
beforeMount
在掛載之前被調(diào)用 。當(dāng) Vue 實(shí)將要掛載到 DOM 時(shí)執(zhí)行該方法。 在此階段，Vue 的 render 函數(shù)已經(jīng)返回虛擬 DOM 并進(jìn)行了 diff 算法計(jì)算，即將來會(huì)更新視圖的內(nèi)容已被計(jì)算，但是尚未應(yīng)用到視圖上。
mounted
當(dāng) Vue 實(shí)例掛載到 DOM 上后調(diào)用 。這說明現(xiàn)在真正的執(zhí)行 DOM 和 Webpack 文件打包工作均完成，Vue插件安裝、數(shù)據(jù)依賴關(guān)系初始化等等也都已完成，因此可以進(jìn)行一些需要操作 DOM 的任務(wù)。mounted 僅僅保證了在該鉤子函數(shù)中可以正常訪問 DOM 元素，所有的 Mounted 過程并不是一次性完全輸出，而是一個(gè)疊加效果:首先最開始的 mounted 先執(zhí)行（包含其內(nèi)部子組件），接著是子孫組件的 mounted。
beforeUpdate
在當(dāng)前組件更新前被調(diào)用，即數(shù)據(jù)更新前 DOM 更新前。當(dāng)數(shù)據(jù)改變導(dǎo)致模板重新渲染時(shí)，面向用戶的界面還沒有被更新，這時(shí)就會(huì)調(diào)用 beforeUpdate 鉤子。因?yàn)閿?shù)據(jù)已經(jīng)發(fā)生變化，但是頁面的數(shù)據(jù)并沒有變 （如果有修改數(shù)據(jù)的話，使用 $nextTick）。 可以通過在鉤子函數(shù)中對狀態(tài)的操作，從而讓狀態(tài)修改后立即生效，這樣做同樣是不推薦的。
updated
當(dāng)前組件更新結(jié)束之后調(diào)用(即由于數(shù)據(jù)更新而觸發(fā)重新渲染過后)。這里就需要注意的是 updated 與 mounted 非常相似。不同在于 updated 是每次數(shù)據(jù)更新都會(huì)執(zhí)行，而 mounted 只會(huì)執(zhí)行一次。
activated
keep-alive 組件激活時(shí)調(diào)用。 activated 鉤子函數(shù)僅僅在使用 keep-alive 組件時(shí)才能被觸發(fā)。使用 keep-alive 包裹的組件在被銷毀時(shí)，其緩存的狀態(tài)會(huì)保存。當(dāng)再次需要使用該組件時(shí)，緩存的狀態(tài)會(huì)恢復(fù)。這個(gè)時(shí)候 activated 就會(huì)被調(diào)用。
deactivated
keep-alive 組件停用時(shí)調(diào)用。 deactivated 不同 activated 一樣，deactivated 鉤子函數(shù)僅僅在使用 keep-alive 組件時(shí)才能被觸發(fā)。當(dāng) keep-alive 組件從文檔中移除并停用時(shí)，deactivated 就會(huì)被調(diào)用了。
beforeDestroy
在一個(gè) Vue 實(shí)例銷毀之前調(diào)用。這個(gè)時(shí)候 Vue 組件實(shí)例完全可用，用戶界面依然可以互動(dòng)。 beforeDestroy 發(fā)生時(shí)如有監(jiān)聽器要指定清理工作，請務(wù)必在此時(shí)進(jìn)行清理以避免內(nèi)存溢出等問題的出現(xiàn)。
destroyed
在一個(gè) Vue 實(shí)例銷毀之后調(diào)用。這個(gè)時(shí)候代表著組件已經(jīng)完全的被銷毀，那么組件對象也就變得毫無價(jià)值。所有的事件監(jiān)聽器、數(shù)據(jù)綁定和子組件也已經(jīng)被移除了。
errorCaptured
當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)會(huì)調(diào)用這個(gè)鉤子。用于統(tǒng)計(jì)錯(cuò)誤、日志上報(bào)等收集異常信息。
二、Vue 3 的生命周期鉤子函數(shù)
Vue 3 在生命周期設(shè)計(jì)上擺脫了 Vue 2 的基于代碼順序的設(shè)計(jì)，轉(zhuǎn)而使用了基于 API 的逐步執(zhí)行。
setup
組件選項(xiàng)中最先被執(zhí)行的一個(gè)鉤子函數(shù)是 setup。在這個(gè)鉤子函數(shù)中可以設(shè)置 props、data、computed、methods 等函數(shù)或?qū)傩?，并且需要將這些函數(shù)或?qū)傩员┞督o模板中使用。setup 函數(shù)會(huì)在組件實(shí)例創(chuàng)建前執(zhí)行，而這個(gè)函數(shù)所提供的所有屬性都會(huì)被視為響應(yīng)式數(shù)據(jù)，也就是說，可以通過類似于 data 中所提供的語法去訪問和更新它們。
onBeforeMount
與 beforeMount 的作用一致，在組件即將被安裝時(shí)執(zhí)行。
onMounted
與 mounted 的作用一致，在組件已經(jīng)被安裝后立即執(zhí)行。
onBeforeUpdate
與 beforeUpdate 的作用一致，在組件即將更新時(shí)執(zhí)行。
onUpdated
與 updated 的作用一致，在 DOM 被更新同步后執(zhí)行。
onErrorCaptured
與 errorCaptured 的作用一致，可以捕獲子孫組件拋出的錯(cuò)誤并進(jìn)行統(tǒng)計(jì)和上報(bào)。
onBeforeUnmount
與 beforeDestroy 的作用一致，在組件即將被卸載時(shí)執(zhí)行。在這個(gè)階段內(nèi)部狀態(tài)還是可用的。
onUnmounted
與 destroyed 的作一致，在組件已經(jīng)被卸載并且其對應(yīng)的視圖 DOM 已經(jīng)被清空之后執(zhí)行。
onRenderTracked
在 Vue 3 中新增了一個(gè)鉤子函數(shù) onRenderTracked，可以用于捕獲組件渲染的過程中哪些數(shù)據(jù)被訪問，哪些數(shù)據(jù)被修改等。這對于診斷 Vue 應(yīng)用的性能問題是非常有幫助的。
onRenderTriggered
與 onRenderTracked 功能相反, 它會(huì)在組件渲染的過程中，跟蹤是什么引起了渲染的。這個(gè)鉤子函數(shù)也可以用于優(yōu)化組件渲染性能。
三、總結(jié)
Vue 3 的生命周期相較于 Vue 2 精簡、靈活性更高，通過 Composition API 將所有數(shù)據(jù)操作集中到 setup 選項(xiàng)中，代碼結(jié)構(gòu)清晰，使得開發(fā)者可以更容易地按照需求組織代碼并快速迭代。此外，Vue 3 增加了幾個(gè)新的生命周期鉤子函數(shù)，如 onRenderTracked 和 onRenderTriggered，可以通過這些新的 API 更好地優(yōu)化應(yīng)程序性能問題。
本文題目：Vue2到Vue3你必知的生命周期鉤子函數(shù)，快速搞定Vue組件優(yōu)化
網(wǎng)頁地址：http://m.5511xx.com/article/djhepji.html
