先上一副官網的生命週期圖,稍微補充了點說明。
在不同的生命週期函式中執行**:
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...