Vue生命週期

2021-10-03 21:39:38 字數 795 閱讀 7328

vue生命週期是指vue例項建立、資料初始化、掛載、更新、銷毀,的各個階段。

在vue中有與之相關的生命週期鉤子函式,他們分別是

beforecreate:這個函式在例項被初始化時執行,此時資料並未初始化

created:表示data與methods已經被初始化好了,如果你在例項建立要運算元據至少在這個階段進行

beforemount模板已經在記憶體中編譯,但未將模板掛載到頁面中,這個階段頁面的資料只是}類的形式,資料並沒有渲染到頁面

mounted:已經將記憶體中的模板掛載到頁面上,資料也一併渲染到頁面,因此如果你想在建立例項的時候操作dom元素,至少該在這個階段執行,這個階段代表著vue例項已經建立完畢

beforeupdate:當資料更新時,此時更新的資料已經傳入,但並未重新渲染頁面,此時頁面的資料與data的資料不一致

updated:這個階段會將data的資料在記憶體中重新渲染出乙份dom樹,並重新掛載到頁面上,此時頁面的資料與data的資料保持一致。

beforedestory:當執行到這個函式時vue例項已經從執行階段進入到銷毀階段,此時並未真正銷毀

destoryed:執行到這裡時vue示例被完全銷毀

vue生命週期圖示

vue生命週期

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

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...