Vue的生命週期(鉤子函式)

2022-03-25 03:05:24 字數 1700 閱讀 3924

vue一共有10(嚴格說應該是8個,總數是10個 因為有兩個是屬於存在keep-alive才會生效的生命週期)個生命週期函式,我們可以利用這些函式在vue的每個階段都進行運算元據或者改變內容。

其實在vue的官網有一張圖已經很好的詮釋了生命週期,我在這裡就不再多講了,直接貼圖,然後上程式**。

加分

//外部銷毀

vue(,

methods:

},beforecreate:

function

(), created:

function

(), beforemount:

function

(), mounted:

function

(), beforeupdate:

function

(), updated:

function

(), activated:

function

(), deactivated:

function

(), beforedestroy:

function

(), destroyed:

function()

})

建立前/後

在beforecreated階段,vue例項的掛載元素$el和資料物件data都為undefined,還未初始化。

在created階段,vue例項的資料物件data有了,$el還沒有。

載入前/後

在beforemount階段,vue例項的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。

在mounted階段,vue例項掛載完成,data.message成功渲染。

更新前/後

當data變化時,會觸發beforeupdate和updated方法。

銷毀前/後

在執行destroy方法後,對data的改變不會再觸發週期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在

第一次頁面載入會觸發哪幾個鉤子

第一次載入會觸發 beforecreate、created、beforemount、mounted

dom 渲染在哪個週期中就已經完成

mounted

簡述每個週期具體適合哪些場景

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

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

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

mounted : 掛載元素,獲取到dom節點 updated : 如果對資料統一處理,在這裡寫上相應函式

beforedestroy : 可以做乙個確認停止事件的確認框 nexttick : 更新資料後立即操作dom

vue生命週期,鉤子函式

一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了,總結一下,對官方文件的那張圖簡化一下,就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行,看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...

vue 生命週期(鉤子函式)

new vue 例項物件,下一步進入beforcreate 狀態 當使用new vue 建立物件之前,執行的事件 這裡可以做載入動畫 下一步,進入created 然後,他會檢測是否有el屬性,如果有在檢測template屬性型別,是一段渲染的函式還是一段html 然後就進入了beforemount狀...

vue生命週期鉤子函式

什麼是生命週期?vue中的生命週期指的是 元件 從建立到銷毀乙個過程,在這個過程中,我們在每乙個特定的階段會觸發一些方法 這些方法具備一些功能 我們給這些方法起了個名字叫做 生命週期鉤子函式 元件鉤子 為什麼要學習生命週期?因為我們想在生命週期鉤子中實現專案功能,那麼我們必須知道每乙個鉤子函式的具體...