關於vue的生命週期

2022-07-20 08:48:10 字數 1204 閱讀 9693

關於vue的生命週期我們來看下這個官方的圖:

從圖中我們很容易看的出vue元件的生命週期的鉤子函式有以下這些:

下面分別說以下這些生命週期:

beforecreate

這個生命週期如上圖所示 例項初始化在這個生命週期遍歷 data 物件下所有屬性將其轉化為 getter/setter,也就是說新增乙個被觀察者,所以我們平時在專案中遇到在後來新增新的屬性檢視不更新就是這個原因,在後來被新增的屬性,沒有被放到觀察者物件中去 但是這個時候資料並沒有和模板建立鏈結 還不能操作屬性。

到這個生命週期的時候 例項已經被建立完畢 屬性已經繫結 屬性是可以操作的

但是dom還不存在 $el屬性還不可以操作

這個生命週期可以進行axios請求 但是這個時候頁面還沒有被渲染出來 如果請求時間過長的話 會出現長時間的白屏

beforemount

這個生命週期 el還未對資料進行渲染 還是不能操作dom

mounted

這個時候的虛擬dom已經被渲染到了真實的dom上邊

這個生命週期裡邊我們可以做的事情很多 比如資料請求或者賦值操作屬性等等

顧名思義銷毀前這個生命週期 的時候 還是可以對元素進行操作的

之前在專案中用到的就是。銷毀這個生命週期執行過後 例項的屬性和方法就不能再用了

以上這些生命週期鉤子函式只能執行一次。

beforeupdate和updated

顧名思義在更新之前和更新之後呼叫的鉤子函式,這裡我用的最多的是updated,這裡要注意的是data中的資料發生變化之後updated不會立刻執行,要等dom渲染之後updated才會執行。

以下是具體該什麼時候去使用

beforecreate: 可以在這加個loading事件 

created:在這結束loading,還做一些初始化,實現函式自執行 

mounted: 在這發起後端請求,拿回資料,配合路由鉤子做一些事情

beforedestroy: 做路由的一些刪除操作。

vue 關於生命週期

序言 1.vue 單元件的生命週期 2.vue 父子元件的生命週期 3.axios 非同步請求 與 vue 的元件週期 vue的生命週期 淺白 簡單總結 1.beforecreate 此時 el data 的值都為 undefined 2.created 此時可以拿到 data 中的值,但是 thi...

vue生命週期

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

vue生命週期

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