Vue js 的生命週期詳解

2022-08-26 15:39:11 字數 2300 閱讀 7935

vue 例項有乙個完整的生命週期,也就是從開始建立、初始化資料、編譯模板、掛載dom→渲染、更新→渲染、解除安裝等一系列 過程,我們稱這是 vue 的生命週期。通俗說就是 vue 例項從建立到銷毀的過程,就是生命週期。

在vue的整個生命週期中,它提供了一些生命週期鉤子,給了我們執行自定義邏輯的機會。

它可以總共分為8個階段:

beforecreate(建立前),

created(建立後),

beforemount(載入前),

mounted(載入後),

beforeupdate(更新前),

updated(更新後),

beforedestroy(銷毀前),

destroyed(銷毀後)

接下來我們用例子來看看生命週期鉤子是怎麼用的:

html結構:

<

div

id>

<

p>}

p>

<

input

type

="text"

v-model

="message"

>

<

button

v-on:click

="change"

>改變資料

button

>

div>

我們對 input 和 p 繫結了data 物件的 message 資料,vue 例項構建如下:

然後在 methods 裡面新增乙個change方法:

methods:  

}

點選按鈕之後出現的是:

這就是vue的生命週期,很簡單吧。

在例項中分別在每個生命週期鉤子中console.log('鉤子名稱',this.message)我們發現,第一次頁面載入時觸發了 beforecreate, created, beforemount, mounted 這幾個鉤子,data 資料在 created 中可獲取到。再去console.log('mounted: ', document.getelementsbytagname('p')[0]),dom 渲染在 mounted 中已經完成。

我們再試著去點選按鈕更改 message 和 input 輸入框中的內容,可以看到資料同步發生改變,這就是資料繫結的效果,在更新資料時觸發 beforeupdate 和 updated 鉤子,且在 beforeupdate 觸發時,資料已更新完畢。

時觸發,對 vue 例項進行銷毀。銷毀完成後,我們再重新改變 number 的值,vue 不再對此動作進行響應了。但是原先生成的dom元素還存在,可以這麼理解,執行了destroy操作,後續就不再受vue控制了。

生命週期鉤子的一些使用方法:

beforecreate : 可以在這加個loading事件,在載入例項時觸發 

created : 初始化完成時的事件寫在這裡,如在這結束loading事件,非同步請求也適宜在這裡呼叫

mounted : 掛載元素,獲取到dom節點

updated : 如果對資料統一處理,在這裡寫上相應函式

beforedestroy : 可以做乙個確認停止事件的確認框

nexttick : 更新資料後立即操作dom

actived生命週期 Vuejs 生命週期

每個 vue 例項在被建立時都要經過一系列的初始化過程。如需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這給了使用者在不同階段新增自己的 的機會。乙個 vue 例項 我們建立乙個 vue 例項,並在每個階段驗證 ...

vuejs2 0的生命週期解讀

每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如,例項需要配置資料觀測 data observer 編譯模版 掛載例項到 dom 然後在資料變化時更新 dom 下圖展示的就是乙個vue例項物件的生命週期 從圖上我們可以看到vue在生命週期中有這些狀態,beforecreate,crea...

Servlet Servlet生命週期詳解

servlet 生命週期詳解 servlet 的生命週期是由 servlet 的容器來控制的。分為 3個階段 初始化階段 執行階段 銷毀階段。servlet 容器載入 servlet 類,把它的.class 檔案中的資料讀到記憶體中。servlet 容器建立 servletconfig 物件。ser...