vue全家桶 vue生命週期

2021-08-21 23:56:02 字數 993 閱讀 1821

vue的生命週期其實很好理解,它就是乙個vue例項從建立到銷毀的乙個過程。

我們先來看一下官網給的vue生命週期圖譜

從圖上可以很輕易看到vue的生命週期由8個鉤子分成了8個階段

beforecreate:建立前

created:建立後

beforemount:載入前

mounted: 載入後

beforeupdate :更新前

update: 更新後

beforedestroy : 銷毀前

destroyed :銷毀後

別人介紹都喜歡用demo,我感覺還是來說說吧,就不用demo了

在這個階段,你應該剛new了個vue的例項,這時例項中的el、data等都是undefined,也就是說全是空,因為還沒掛載值

到了這個階段,資料已經繫結到你的例項上了,這時你可以進行初始值的獲取,但是不會觸發到下面的鉤子。而el依然為空,因為還沒開始掛載物件

在這裡,應該已經找到了el物件,如果沒有找到,那麼例項的生命週期到這就已經停止了。

如果找到了el物件,那麼虛擬dom在這也就建立完成了,並進入render等待渲染。在這,你可以和created階段一樣,獲取初始值,也依然不會觸發下面的鉤子。

在這個階段,虛擬dom已經被轉換為真實dom渲染到了頁面中,這時你就可以進行dom操作了。

一旦你進行了資料更改,beforeupdate就會立即執行,它會重新建立虛擬dom,準備重新渲染。

到了這,頁面的重新渲染已經完成了,可以繼續進行dom操作。

在這一步的時候,例項依然存在並且有效。

到了這,該例項的所有東西都會解除繫結,事件也都移除,再次成為乙個空的例項。

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...