詳細聊聊Vue生命週期的那些事
目錄
- 前言
- 一、2中的生命週期
- 例項的生命週期
- 其它生命週期鉤子
- 二、Vue3中的生命週期
- Options API生命週期
- Composition API生命週期
- 兩個新的Vue3生命週期函式
- 最後
前言
如今學習Vue的人越來越多了，Vue框架或React框架的學習也成為開發了前端開發人員的必備技能，今天我們就來聊聊Vue中的生命週期函式，Vue中生命週期函式的參考價值很高，讓我們來一起認識它吧~
一、Vue2中的生命週期
例項的生命週期
在介紹生命週期之前，我們需要知道在Vue中要渲染一塊頁面內容的時候，會有下面這幾個過程：
- 解析語法生成 AST。
- 根據 AST 結果，完成 data 資料初始化。
- 根據 AST 結果和 data 資料繫結情況，生成虛擬 DOM。
- 將虛擬 DOM 生成真正的 DOM 插入到頁面中，此時頁面會被渲染。
當我們繫結的資料進行更新的時候，又會產生以下這些過程：
- 框架接收到資料變更的事件，根據資料生成新的虛擬 DOM 樹。比較新舊兩棵虛擬 DOM 樹，得到差異。
- 把差異應用到真正的 DOM 樹上，即根據差異來更新頁面內容。
當我們清空頁面內容時，還有：
- 登出例項，清空頁面內容，移除繫結事件、監聽器等。
Vue為例項提供的生命週期函式一共有8個：
- beforeCreate(): 初始化例項前，data、methods等不可獲取——1之後，2之前
- created():例項化初始化完成，此時可獲取data裡資料和methods事件——2之後，3之前
- beforeMount():虛擬DOM建立完成，此時未掛載到頁面中，vm.$el可獲取未掛載模板——3之後，4之前
- mounted():資料繫結完成，真實DOM已掛載到頁面，vm.$el可獲取真實DOM——4之後
- beforeUpdate():資料更新，DOM Diff得到差異，未更新到頁面——5之後，6之前
- updated():資料更新，頁面也已更新——6之後
- beforeDestroy():例項銷燬前——7之前
- destroyed():例項銷燬完成——7之後
關於例項的生命週期，大家還可以參考官方的圖例
其它生命週期鉤子
其它的生命週期函式還有activated(),deactivated(),errorCaptured()
keep-alive獨有的生命週期分別為activated和deactivated。
用keep-alive包裹的元件在切換時不會進行銷燬，而是快取在記憶體中並執行deactived鉤子函式，命中快取渲染後會執行activated鉤子函式
errorCawww.cppcns.comptured()鉤子當在子元件內捕獲到錯誤時會呼叫這個鉤子函式。
二、Vue3中的生命週期
Vue3中的生命週期在使用Options API和Composition API會有所不同。
Options API生命週期
- beforeDestroy改為beforeUnmount
- destroyed改為unmounted
尤大大為什麼要把他改成這樣，他的回覆是這很大程度上是為了更好的命名約定，對應的中文正是解除安裝元件和前面的掛載元件契合不少。
- 其它沿用Vue2生命週期
Composition APIhtMdlrHgF生命週期
在Composition API中使用鉤子函式，我們只需要在鉤子函式前面新增“on”,並在setup函式內部即可,它就會變成這樣👇
我們只需要引入這些鉤子函式就可以使用啦
Vue3的鉤子函式如下：
- onBeforemount()
- onMounted()
- onBeforeUpdate()
- onUpdated()
- onBeforeUnmount()
- onUnmounted()
- onActivated()
- onDeactivated()
- onErrorCaptured()
如果你注意觀察，你會發現兩個生命週期函式消失了，beforeCreate()和created()不會出現在Composition 客棧API中，我們有setup()方法即可，setup()方法出現在beforeCreate()和created()之間。
兩個新的Vue3生命週期函式
- onRenderTracked()：第一次在render函式中訪問反應性依賴項時，將呼叫此函式，當我們想檢視正在跟蹤哪些依賴項時，鉤子很有用，對調式很有作用。
- onRenderTriggered():當觸發新渲染時，將呼叫此選項，允許檢查哪個依賴項觸發了要重新渲染的元件。
最後
http://www.cppcns.com
⚽這篇文章主要介紹了Vue中的生命週期函式，相信你一定有所收穫~
到此這篇關於Vue生命週期的那些事的文章就介紹到這了,更多相關Vue生命週期內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！