vue生命周期

一、元件生命周期

元件生命周期：一個元件或一個"頁面"加載過程中所經曆的每個階段。

今後隻要希望在頁面或元件加載完成後自動執行一些初始化任務時就需要用到元件頁面的生命周期.

四個階段

(僅以new Vue()舉例)

(1)建立(create)階段(必經).

a．建立new Vue()對象.

b．加載data對象到new Vue()中。

c．暫時沒有虛拟DOM樹，可能無法執行DOM操作

(2)挂載(mount)階段

a.根據el所指掃描頁面，并首次将data中的變量值渲染到頁面顯示.

b.既有data，又有虛拟DOM樹，既可以操作data中的變量，又可以對頁面執行DOM操作.

(3)更新(update)階段(隻有在data中的變量被修改後才自動觸發)

(4)銷毀(destroy)階段 (隻有手動調用$destroy()函數，銷毀目前元件時才自動觸發)

生命周期鈎子函數

在每個生命周期階段自動觸發的特定的回調函數(類似于Dom 中的事件處理函數)

隻要希望在特定的生命周期階段執行一些操作時，都要把操作寫在對應的生命周期鈎子函數内，才能自動觸發.

過程：

beforecreate()

建立(create)

created()

//可發送axios請求，此時也有data，如果請求回來資料，傳回到data中，自動更新到頁面上

風險：萬一axios回來快，後續mount階段還沒完成，無法進行DOM操作

beforemount()

挂載(mount)

mounted()

//最穩妥的發送axios請求時機：既有data又可以進行DOM操作

beforeupdate()

更新(update)

updated()

beforedestroy()

銷毀(destroy)

destroyed