Vue 生命週期的理解

2021-09-02 14:18:54 字數 1350 閱讀 1721

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖;

這些圖是網路的,侵權必刪beforecreate:元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做(新增一些行為此時的this,並不會指向例項物件

create:元件例項建立完成,this指向例項物件,資料完成初始化,但是el未

初始化,

∗∗be

fore

moun

t:資料

完成初始

化,el未初始化,* *beforemount:資料完成初始化,

el未初始化

,∗∗b

efor

emou

nt:數

據完成初

始化,el也完成初始化,beforemount紅色矩形框裡是}資料並未渲染,虛擬dom只是佔了乙個坑,等mounted鉤子函式時把資料用來填上這個坑

mounted:這個時段完成例項的掛載,並完成資料的替換和渲染,在這發起後端請求,拿回資料,配合路由鉤子做一些事情

updated:當資料變化時會觸發updated的生命函式,據更新後呼叫,由於資料更改導致的虛擬 dom 重新渲染和打補丁,所以你現在可以執行依賴於 dom 的操作。然而在大多數情況下,你應該避免在此期間更改狀態。如果要相應狀態改變,通常最好使用計算屬性或 watcher 取而代之

beforedestory:在元件銷毀之前呼叫,例項物件還存在

destory:元件被銷毀,例項物件不能呼叫,this在此時已經並不指向例項物件,所有例項繫結的東西都會被解綁,並移除所有的事件監聽

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

vue生命週期的理解

vue有乙個完整的生命週期,是指從開始建立,初始化資料,編譯模板,掛載dom,渲染更新,銷毀一系列過程,我們稱這是vue的生命週期。通俗的講 vue的例項從建立到銷毀的過程就是vue的生命週期,同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己 的機會 beforec...

vue生命週期的理解

vue例項化 建立的乙個vue的物件,裡面包含的鉤子函式有 data methods computed vue的loading載入不好用的時候 vue中動態渲染 時loading狀態加不上,原因是資料雖然已經出來了,但是檢視一直在重繪 解決方法 初始化的時候給loading賦予true,update...