vue的生命週期和鉤子函式的理解

2022-08-26 12:57:13 字數 886 閱讀 9053

對於vue的生命週期,官方文件上並沒有太多的文本性說明,把自己對生命週期和鉤子函式的理解記錄下來

vue生命週期的概念:vue物件從被建立,到執行邏輯,最後到被銷毀的過程。

具體流程:

1)vue例項的建立

2)初始化事件和生命週期

3)初始化data和methods

4)生成虛擬dom $el(將沒有解析的指令的dom載入到記憶體中)

5)使用$el 來替代el,並且將$el中的指令進行解析

6)進行狀態mounted的迴圈

判斷data中的資料是否發生改變,如果改變,則跟新虛擬dom 並且重新渲染,重新進入mounted狀態

7)vue例項的銷毀

鉤子函式的概念:vue為我們準備的空函式,函式中的內容可以融入到生命週期中,通俗的來說,就是vue執行生命週期的過程中,有很多的邏輯**,將來有可能有需求:在某一段邏輯**中新增自己的**,為了解決這一問題。

函式:1)在初始化data和methods時執行

之前:beforecreate

之後:created(重點)

2)在使用虛擬dom替換el時執行

之前:beforemount

之後:mounted(重點)

3)當資料發生改變時,重新渲染虛擬dom時執行

之前:beforeupdated

之後:updated

4)當呼叫$destory方法時執行($destory銷毀vue例項)

之前:beforedestroy

之後:destroy

將生命週期和其對應的鉤子函式對應的記憶,可以更容易的理解vue的生命週期

vue的生命週期和鉤子函式

vue的生命週期是乙個元件從建立到銷毀的全過程。這個過程包括4個階段,8個函式。也叫8個鉤子函式。1.建立期 beforecreate,created。在created後面一般會調取介面來獲取資料。但是由於在這個時候我們的頁面掛載節點還沒有生成。所以不能再頁面顯示。2.掛載期 beforemount...

vue生命週期,鉤子函式

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

vue 生命週期(鉤子函式)

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