vue生命週期

2021-10-07 02:19:04 字數 939 閱讀 8764

vue生命週期

說到vue的生命週期其實並不難理解,就是從乙個vue專案建立,渲染,資料更新、銷毀。

vue提供了6個鉤子函式,每進入乙個週期時就會觸發對應的鉤子函式,例如當頁面離開後你想銷毀乙個定時器,那麼這時候就要在銷毀前的鉤子函式裡執行。這就是它們的作用。

beforecreated

每乙個頁面都是乙個vue例項,這時例項還沒有被建立,所以你無法知道data,也不能用watch監聽

created 例項

這時例項已經建立,可以得到data,呼叫watch,但是頁面還是空白的

beforemounted

頁面掛載前,此時頁面依然是空白的。這時render函式首次被呼叫。

mounted

頁面掛載了,這時你可以看到頁面的內容,也可以訪問到dom

beforeupdate

資料更新前,也就是虛擬dom打補丁之前。這時訪問到的dom還有原有的dom

update

資料更新完畢後。注意,如果當前頁面有掛載子元件,子元件更新時它並不能保證子元件也重繪了。如果你想確定是整個dom都更新可以使用 this.$nexttick()

activated和deactivated

keep-alive特有的鉤子函式,當被這個標籤包裹的元件被啟用或停用時觸發

bedoredestroy

當你離開這個頁面前被呼叫。例如說取消定時器,使用了第三方庫留下了多餘的dom結構,都可以在這個時機刪除,避免記憶體洩漏。

destroy

這時候例項已經被完全銷毀

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