vue的生命週期(詳細)

2021-10-24 08:18:18 字數 1165 閱讀 3740

生命週期圖:

可以理解vue生命週期就是指vue例項從建立到銷毀的過程,在vue中分為8個階段:建立前/後,載入前/後,更新前/後,銷毀前/後。

1、beforecreate:這個階段例項已經初始化,只是資料觀察與事件機制尚未形成,不能獲取dom節點(沒有data,沒有el)

使用場景:因為此時data和methods都拿不到,所以通常在例項以外使用

2、created:例項已經建立,仍然不能獲取dom節點(有data,沒有el)

使用場景:模板渲染成html前呼叫,此時可以獲取data和methods,so 可以初始化某些屬性值,然後再渲染成檢視,非同步操作可以放在這裡

1、beforemount:是個過渡階段,此時依然獲取不到具體的dom節點,但是vue掛載的根節點已經建立(有data,有el)

2、mounted:資料和dom都已經被渲染出來了

使用場景:模板渲染成html後呼叫,通常是初始化頁面完成後再對資料和dom做一些操作,需要操作dom的方法可以放在這裡

1、beforeupdate:檢測到資料更新時,但在dom更新前執行

2、updated:更新結束後執行

使用場景:需要對資料更新做統一處理的;如果需要區分不同的資料更新操作可以使用$nexttick

1、beforedestroy:當要銷毀vue例項時,在銷毀前執行

2、destroyed:銷毀vue例項時執行

答:每個 vue 例項在被建立時都要經過一系列的初始化過程——例如,需要設定資料監聽、編譯模板、將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做 生命週期鉤子 的函式,這給了使用者在不同階段新增自己的**的機會。(ps:生命週期鉤子就是生命週期函式)例如,如果要通過某些外掛程式操作dom節點,如想在頁面渲染完後彈出廣告窗, 那我們最早可在mounted 中進行。

答:beforecreate, created, beforemount, mounted

答:答:一般 created/beforemount/mounted 皆可。

比如如果你要操作 dom , 那肯定 mounted 時候才能操作。

vue 生命週期 詳細理解

vue巢狀元件的生命週期 繼承元件的生命週期 extends 參考 vue例項的生命週期 推薦一篇乾貨部落格 從vue例項建立 執行 到銷毀期間,總是伴隨著各種各樣的事件,這些事件,統稱為生命週期!注意 mounted 不會保證所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢,可以在 m...

vue生命週期詳細理解

資料觀測和初始化事件還未開始 這個階段的時候data和method都是拿不到的 通常在例項以外呼叫 完成資料觀測,屬性和方法的運算,初始化事件,el屬性還沒有顯示出來 這個可以呼叫例項的資料和例項的方法 帶非同步資料請求的方法可以放在這裡 在el 被新建立的 vm.el 替換,並掛載到例項上去之後呼...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...