這就是VUE生命週期函式

2021-10-11 09:02:43 字數 1229 閱讀 5835

vue生命週期

一:什麼是vue生命週期

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

二、生命週期函式

vue 的生命週期總共分為8個階段:建立前/後,載入前/後,更新前/後,銷毀前/後。

1、beforecreate(建立前),created(建立後)。

1.1 beforecreate表示例項完全被建立出來之前,vue 例項的掛載元素$el和資料物件 data 都為 undefined,還未初始化。

1.2 created資料物件 data 已存在,可以呼叫 methods 中的方法,操作 data 中的資料,但 dom 未生成,$el 未存在 。

2、beforemount(掛載前),mounted(掛載後)

2.1 vue 例項的 $el 和 data 都已初始化,掛載之前為虛擬的 dom節點,模板已經在記憶體中編輯完成了,但是尚未把模板渲染到頁面中。data.message 未替換。

2.2 vue 例項掛載完成,data.message 成功渲染。記憶體中的模板,已經真實的掛載到了頁面中,使用者已經可以看到渲染好的頁面了。例項建立期間的最後乙個生命週期函式,當執行完 mounted 就表示,例項已經被完全建立好了,dom 渲染在 mounted 中就已經完成了。

3、beforeupdate(更新前),updated(更新後)

3.1 當 data 變化時,會觸發beforeupdate方法 。data 資料尚未和最新的資料保持同步。

3.2 當 data 變化時,會觸發 updated 方法。頁面和 data 資料已經保持同步了。

4、beforedestory(銷毀前),destoryed(銷毀後)

4.1 元件銷毀之前呼叫 ,在這一步,例項仍然完全可用。

4.2 元件銷毀之後呼叫,對 data 的改變不會再觸發週期函式,vue 例項已解除事件監聽和 dom繫結,但 dom 結構依然存在。

具體請參考:

vue 生命週期函式

什麼是生命週期 從vue例項建立 執行 到銷毀期間,總是伴隨著各種各樣的事件,這些事件,統稱為生命週期!生命週期鉤子 就是生命週期事件的別名而已 生命週期鉤子 生命週期函式 生命週期事件 主要的生命週期函式分類 建立期間的生命週期函式 beforecreate 例項剛在記憶體中被建立出來,此時,還沒...

vue 生命週期函式

每個鉤子函式都在什麼時間觸發 1.beforecreate 在例項初始化之後,資料觀測 data observer 和 event watcher 事件配置之前被呼叫。2.created 3.beforemount 在掛載開始之前被呼叫 相關的 render 函式首次被呼叫。4.mounted el...

vue生命週期函式

從vue例項建立 執行到銷毀期間總會伴隨各種各樣的事件,這些事件統稱為生命週期。1 beforecreate 在beforecreate生命週期執行的時候,data和method中的資料都還沒有被初始化。2 ceated 在created中data和methods都已經初始化好了。3 beforem...