理解vue生命週期鉤子

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

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

const vm =

newvue(}
, data:
, watch:
, immediate:
true,}
},computed:},
// 生命週期
beforecreate()
,created()
,beforemount()
,mounted()
,beforeupdate()
,updated()
})

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

beforecreate

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

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

template編譯好，dom元素準備好還未替換（掛載）時觸發。

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

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

檢視更新完畢後觸發。

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

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...