vue3的生命週期鉤子與vue2生命週期對比理解

2021-10-20 18:13:52 字數 1552 閱讀 2810

對於vue的生命週期想必大家都非熟悉,在專案中非常常用

生命週期:伴隨著生命週期,給使用者使用的函式,操控生命週期,主要是操控鉤子函式。

vue2--------------vue3

beforecreate -> setup()

created -> setup()

beforemount -> onbeforemount

mounted -> onmounted

beforeupdate -> onbeforeupdate

updated -> onupdated

beforedestroy -> onbeforeunmount

destroyed -> onunmounted

activated -> onactivated

deactivated -> ondeactivated

errorcaptured -> onerrorcaptured

vue3的生命週期函式在使用前需要先引入

import

from

"vue"

;

setup()

)onupdated((

)=>

)onrendertriggered

((event)

=>

)}

onrendertracked=>狀態跟蹤,他會跟蹤頁面上所有響應式變數和方法的狀態,也就是我們return出去的值,

只要頁面有update的情況,他就會跟蹤,然後生成乙個event物件,我們可以通過event物件來查詢程式所存在的問題

同樣需要先引入

import

from

"vue"

;

再在setup函式中使用

onrendertracked

((event)

=>

);

onrendertriggered=> 狀態觸發,不會跟蹤每乙個值,而是給你變化值的資訊,並且新值和舊值都會明確的展示出來

如果把onrendertracked是每個值都追蹤,而onrendertriggered是精準追蹤,進行針對性除錯

使用時我們同樣需要匯入

import

from

"vue"

;onrendertriggered

((event)

=>);

- key 那邊變數發生了變化

- newvalue 更新後變數的值

- oldvalue 更新前變數的值

- target 目前頁面中的響應變數和函式

這樣看來onrendertriggered跟watch有一絲絲像watch

vue生命週期鉤子

el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...

Vue 生命週期鉤子

從vue例項建立,執行,到銷毀期間,總是伴隨著各種各樣的事件,這些事件,稱為生命週期。建立 beforecreate 例項剛剛在記憶體中被建立出來,但data和methods還沒有進行初始化。created 例項已經在記憶體中建立,data和methods還沒有建立 beforemount 完成模板...

vue生命週期鉤子

生命週期 vue 例項從開始建立 初始化資料 編譯模板 掛載dom 渲染 更新 渲染 解除安裝等一系列過程,我們稱這是 vue 的生命週期,各個階段有相對應的事件鉤子。函式元件狀態 最好的用法 beforecreate 例項初始化之後,this指向建立的例項,不能訪問到data computed w...