Vue之生命週期函式詳解

眾所周知。

vue生命週期分成八個階段此部落格搭配vue官方週期圖示食用效果更佳。

vue例項已經建立，但是data，和methods中的資料和方法都未被初始化。就是說你可以在beforecreated（）{}中獲取到this，this指的是當前的vue例項或者元件，但是this.data，this.method都是獲取不到的。

vue中data和method都已經初始化好。一般在此鉤子函式中進行資料的初始化。

在此階段後和beforemounte之前執行了render函式。vue將**渲染成記憶體中的dom，也就是虛擬dom。尚未掛載到頁面中。

在此之後在beforemount之前，vue建構函式會檢查配置項中有無el屬性。如果有則替換html文件中的節點。再判斷是否指定了template選項，如果有則將template替換節點，如果沒有則依然是用el替換節點。

3.beforemount（）函式中，頁面中是沒有被虛擬dom替換之前的dom

打個栗子

let vm = new vue(
},beforemount(),
mounted(),
methods:,
watch:,}}
改變!`,
})

再看列印結果

4.mounted（）頁面顯示的是已經被替換之後的元素。

以上是vue元件建立期間的鉤子函式

以下是元件執行期間的鉤子函式。

5.beforeupdate() 觸發此鉤子函式的方法就是data中的值發生改變。在此鉤子函式中還能拿到更新之前的值。

在此鉤子函式中，介面還沒有被更新，但是data值已經更新。（總結：舊頁面，新資料）

在beforeupdate之後和update之前vue在記憶體中偷偷執行了virtual dom的重新渲染和掛載。

6.update（）在此鉤子中能拿到新介面的值，和新的資料值。（總結：新介面，新資料）

測試**及截圖

let comp = }
改變了",
data() 
},methods: 
},beforeupdate() ,
updated()
}let vm = new vue(
},components: ,
})

接下來就是銷毀階段

7.beforedestroy（）進入到例項銷毀階段。例項中的所有資料和方法依舊可用。

8.destroyed（）函式。例項已經銷毀，所有資料和方法均不可用。