理解vue生命週期鉤子

2021-10-05 21:49:34 字數 1175 閱讀 8989

先上一副官網的生命週期圖,稍微補充了點說明。

在不同的生命週期函式中執行**:

const vm =

newvue(}

, data:

, watch:

, immediate:

true,}

},computed:},

// 生命週期

beforecreate()

,created()

,beforemount()

,mounted()

,beforeupdate()

,updated()

})

列印結果:

從上面的列印結果很好的說明了下面的結果:

beforecreate

在載入完vue內建事件和生命週期函式後第乙個呼叫。此時的vue例項只是最初始的狀態。

created
載入完data,computed,watch,methods物件後觸發。此時可以使用methods的方法以及運算元據。

beforemount
template編譯好,dom元素準備好還未替換(掛載)時觸發。

mounted
掛載完畢觸發。此時可以操作dom元素。

beforeupdate
有進行資料繫結的data修改的時候觸發。

beforeupdate
檢視更新完畢後觸發。

beforedestroy
例項銷毀之前呼叫。此時整個vue例項還能使用。一般會在此鉤子函式中清除定時器。

destroyed
vue 例項銷毀後呼叫。此時整個vue例項不可用。

vue生命週期 鉤子理解

在vue文件中,對生命週期部分有如下檢視 建立vue例項 init events lifecycle 開始初始化 beforecreate 元件剛被建立,組建屬性計算之前,如data屬性等 init injections reactivity 通過依賴注入匯入依賴項 created 元件例項建立完成...

Vue生命週期鉤子的理解

元件從建立到銷毀的一系列過程叫做元件的宣告週期。vue在整個生命週期裡面提供了一些函式,可以在內部實現一些業務邏輯,並且這些函式會在一些特定的場合下去執行。在生命週期的某乙個時刻進行觸發 元件的生命週期鉤子函式大致可以分為三個階段 初始化 進行中 銷毀。1 初始化 beforecreate crea...

vue生命週期鉤子

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