vue元件生命週期詳解

2021-10-08 17:59:08 字數 1516 閱讀 3675

簡單概括就是:乙個元件或者「頁面」載入過程中所經歷的每個階段。

因為有一些初始化操作,需要在元件或者頁面載入完成之後就自動執行,不需要人為進行操作

僅以 new vue() 舉例,一共需要經歷 四個階段

建立階段(create)

掛載階段(mount)

更新階段(update)

銷毀階段(destroy)

建立階段特點:

1、建立new vue 物件

2、載入data 物件到new vue() 中

3、暫時沒有虛擬dom樹,無法執行dom操作

掛載階段的特點:

1、根據el所指掃瞄頁面,並首次將data中的變數值渲染到頁面顯示

2、此階段既有了data,又有了虛擬dom樹,既有可以操作data的變數,又可以對頁面執行dom操作

如果頁面或者元件載入完成之後,沒有修改頁面中的資料,那麼update階段是不會被觸發的

如果沒有使用$destroy()銷毀元件或者頁面,那麼destroy階段就不會被觸發。

元件或頁面每經歷乙個階段,前後都會有乙個類似鉤子一樣的函式,他們會自動觸發。

非常類似於dom中的事件處理函式。

每個階段有2個,四個階段一共有8個鉤子。

因此鉤子函式一共有8個。

何時會用鉤子函式:只要希望在特定的生命週期階段執行一些操作是,就可以把相關操作寫到對應的生命週期的鉤子函式中,才能自動觸發,

比如:傳送ajax請求等,vue中用的是axios傳送ajax請求

建立階段前的鉤子: beforecreate()

建立階段(create)

建立階段後的鉤子:created()

掛載階段前的鉤子:beforemount()

掛載階段(mount)

掛載階段後的鉤子:mounted()

更新階段前的鉤子函式:beforeupdate()

更新階段(update)

更新階段後的鉤子函式:updated()

銷毀階段前的鉤子函式:beforedestroy()

銷毀(destroy)

銷毀階段後的鉤子函式:destroyed()

總結:傳送axios請求的時機應當放到mounted()函式中,因為此時既有data,又有虛擬dom樹。

如有誤,請各位指正,萬分感激!!!

vue元件生命週期詳解

分為4個階段 create mount update destroy 每乙個階段都對應著有自己的處理函式 create beforecreate created 初始化mount beforemount mounted 和掛載相關的處理 update beforeupdate updated 根據要...

vue元件生命週期

beforecreate建立前 created建立後 beforemountvue裝載dom之前 mountedvue裝載dom之後 beforeupdate資料改變出發,改變前 updated資料改變出發改變後 beforedestory元件銷毀前 destoryed元件銷毀後 beforeact...

vue生命週期詳解

vue生命週期分為八個階段 建立前後 掛載前後 更新前後 銷毀前後 beforecreate和create鉤子函式間的生命週期 檢測資料,來檢測資料是否變化了,然後初始化事件 create和beforemount鉤子函式間的生命週期 首先判斷有沒有el選項 1.如果沒有的話就暫時停止了生命週期,等待...