vue（20）生命週期函數

生命週期函數

生命週期函數表明的是Vue實例，或者是Vue組件，在網頁中各個生命階段所執行的函數。生命週期函數能夠分爲建立階段和運行期間以及銷燬期間。
其中建立期間的函數有beforeCreate、created、beforeMount、mounted；
運行期間的函數有beforeUpdate、updated；
銷燬期間有beforeDestroy、destroyed。
如下是官方文檔給到的一張圖，從這種圖中咱們能夠了解到每一個部分執行的函數。

 

1. 建立期間

 

1.1 beforeCreate：

Vue或者組件剛剛實例化，data、methods都尚未被建立。
 

1.2 created

此時data和methods已經被建立，能夠使用了。模板尚未被編譯。
 

1.3 beforeMount：

created的下一階段。此時模板已經被編譯了，可是並無被掛在到網頁中。
 

1.4 mounted

模板代碼已經被加載到網頁中了。此時建立期間全部事情都已經準備好了，網頁開始運行了。
 

2. 運行期間

 

2.1 beforeUpdate：

在網頁運行期間，data中的數據可能會進行更新。在這個階段，數據只是在data中更新了，可是並無在模板中進行更新，所以網頁中顯示的仍是以前的。
 

2.2 updated

數據在data中更新了，也在網頁中更新了。
 

3. 銷燬期間

 

3.1 beforeDestroy

Vue實例或者是組件在被銷燬以前執行的函數。在這一個函數中Vue或者組件中全部的屬性都是能夠使用的。
 

3.2 destroyed

Vue實例或者是組件被銷燬後執行的。此時Vue實例上全部東西都會解綁，全部事件都會被移除，全部子元素都會被銷燬。