Vue生命週期鉤子函式簡述

2021-10-05 01:37:58 字數 1276 閱讀 3312

vue 例項或元件(元件本質上就是乙個具有預定義選項的例項)建立到銷毀的一系列過程,就叫做生命週期。

生命週期的鉤子函式

在生命週期不同的階段中會自動執行的函式,就叫做生命週期的鉤子函式

初始化掛載階段

beforecreate

created

beforemount

mounted

更新階段

beforeupdate

updated

銷毀階段

beforedestroy

destroyed

例項建立之前

乙個生命週期過程中,只會觸發一次

獲取不到掛載點元素和data資料

一般沒什麼作用,但硬要去槓的話也是可以傳送ajax的,因為 ajax 是非同步的操作,非同步完成的時候,生命週期進入了後續階段(mounted 都完成了),所以在後續階段中是可以去修改 data 中的資料的。

例項建立完成

乙個生命週期過程中,只會觸發一次

能獲取到 data 選項中的資料了,能呼叫 methods 選項中函式了。

獲取不到掛載點元素

一般在這裡傳送 ajax 請求獲取頁面一開啟就需要的資料

例項掛載之前:相關的 render 函式首次被呼叫。

掛載的意思是:vue 解析模板資料完成,並替換到真實的dom上面。

乙個生命週期過程中,只會觸發一次

通過 vm.$el 獲取不到真實的dom

一般沒什麼作用,不用去操作它。

例項掛載完成

乙個生命週期過程中,只會觸發一次

能夠獲取到真實的dom

初始化與dom相關的操作可以放在這兒。比如 swiper 的例項化。

例項更新之前

乙個生命週期過程中,可能會觸發多次

能得到資料更新之前的dom,但是得不到資料更新之後的dom

一般不要在這裡去修改資料,也不要去傳送非同步請求 ,會進入死迴圈

一般沒什麼作用,不用去操作它。

例項更新完成

乙個生命週期過程中,可能會觸發多次。

能得到資料更新之後的dom。

一般不要在這裡去修改資料,也不要去傳送非同步請求 ,會進入死迴圈

一般用於真實dom更新之後的操作,比如 swiper 的更新。

例項銷毀之前

做一些銷毀工作,比如 計時器的清除、全域性事件繫結的銷毀等工作。

例項銷毀完成

這個時候只剩下了dom空殼。元件已被拆解,資料繫結被卸除,監聽被移出,子例項也統統被銷毀。

一般沒什麼作用,不用去操作它。

vue生命週期,鉤子函式

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

vue 生命週期(鉤子函式)

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

vue生命週期鉤子函式

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