對於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狀...