徹底弄懂Vue生命週期

2021-10-06 06:37:46 字數 1145 閱讀 4068

字面上理解,生命週期就像人的生命一樣,從出生到老去的過程,在這個過程,我們在合適的年齡做合適的事情,比如上學,工作,娶老婆等等,大概就這麼個意思。

那麼vue生命週期也與此類似,就是vue例項從建立到銷毀的過程,這就是vue的生命週期,專業的說就是從開始建立、初始化資料、編譯模板、掛載dom->渲染、更新->渲染、銷毀等一系列的過程,在這個過程中我們會用相應的生命週期鉤子函式做一些相對應的事情。

vue總共有8個生命週期函式:beforecreate/created、beforemount/mounted、beforeupdate/updated、beforedestroy、destroyed。

new vue( )例項當前vue物件,沒建立物件之前就有beforecreate方法,它對當前的事件和data屬性做些配置,比如在裡面可以做載入的動畫;

new

vue().

$mount

如果有el這個屬性它會檢查template有沒有,有兩種情況:

new

vue(

)

new

vue(

)

如果template裡既沒有要執行的元件也沒有模板字串裡寫標籤那種,生命週期也會結束,因為沒有可渲染的東西。

然後進入beforemount,此時頁面還沒渲染出來,虛擬dom已經配置,元件掛載之前,可以在這裡面做一些工作,看需求。

然後進入mounted,mounted執行完後此時模板編譯完了,掛載完後頁面就渲染出來了,如果想一些東西在頁面顯示出來之後再去操作就要寫在mounted方法裡面,比如想從後台獲取資料,一定是當前頁面都渲染顯示完之後再去獲取資料,寫在mounted裡。mounted一旦掛載dom就生成了,頁面就顯示出來了,就能看到頁面了。

元件在更新之前呼叫beforeupdate方法,元件在更新之後呼叫updated方法,一般元件的增刪改查可以寫在updated方法裡。

beforedestroy方法元件在銷毀之前,destroyed元件在銷毀之後,比如我們可以在destroyed裡清除之前建立的定時器。

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