Vue學習筆記(2) Vue的生命週期

2021-08-29 04:14:05 字數 1105 閱讀 7853

面試碰到這個問題了,回想一下,很多問題都是寫**的時候碰到了隨查隨寫缺少總結,真到了要說點什麼的時候就說的亂七八糟,那麼這次就來捋一捋vue的生命週期

生命週期,就是vue例項在被建立之前要經過一系列的初始化過程。首先,放一張vue官網的生命週期圖示。

圖示中可以看到,vue的生命週期中順序的包含了以下幾個生命週期鉤子,然後結合生命週期我們逐一討論:

1. beforecreate

在這個生命週期,元件例項剛剛被建立但尚未建立完成,而元件屬性如$eldata等都還沒有計算。

2. created

元件例項已建立完成,data等屬性已繫結完成,但dom尚未生成,$el屬性還不存在

3. beforemount

即模板編譯、掛載之前,這個生命週期,首先會判斷是否存在el選項,存在則繼續編譯,否則停止編譯、生命週期暫停直到呼叫vm.$mount(el)方法才會繼續向下編譯,這個el引數就是掛載的dom節點。

接下來會判斷是否存在template選項,存在則將其作為模板編譯成render函式,否則將el的外部html作為模板編譯。

另外vue物件中存在乙個render函式,它的優先順序大於template。

4. mounted

即模板編譯、掛載之後,這裡會給vue例項物件新增$el成員,並且替換掉掛載的dom元素。舉例而言,我們寫在頁面的}

是在這裡把例項裡的msg值渲染上去的。

5. beforeupdate

data的資料發生改變時,會觸發對應元件的重新渲染,這時可以檢測到data變化但是view還沒有重新渲染。

6. updated

view層被重新渲染,資料更新。

6. beforedestroy

beforedestroy在例項被銷毀之前,這時例項仍然完全可用。

7. destroyed

destroyed 在例項被銷毀之後,vue 例項指示的所有東西都會解繫結,所有的事件***會被移除,所有的子例項也會被銷毀。

vue學習筆記 2 vue簡介

本次學習主要來自官網的教程 vue應用是由乙個根vue例項開始的。vue會將資料繫結到data中,當data資料改變時也會導致檢視的改變 觀察者模式 可以實現資料的雙向繫結 響應式 vue例項中的屬性可以通過 屬性名的方式獲取,入 data vue是在初始化時繫結資料的,如果初始化後再次新增元素,則...

2 vue 指令 9 vue生命週期

每個 vue 例項在被建立時都要經過一系列的初始化過程 建立例項,裝載模板,渲染模板等等。vue 為生命週期中的每個狀態都設定了鉤子函式 監聽函式 每當 vue 例項處於不同的生命週期時,對應的函式就會被觸發呼叫。生命週期 例如 created 代表在 vue 例項建立後 我們可以在 vue 中定義...

VUE基礎知識2 VUE介紹

一 vue介紹 在vue中,很多時候不能用箭頭函式。vue.js 是一套構建使用者介面的漸進式框架。框架和庫的區別 框架 vue,乙個擁有完整的解決方案,我們寫好人家呼叫我。庫 juqery,underscore 模板引擎 zepto,animate.css。我們呼叫它。漸進式vue全家桶 vuej...