vue生命週期

關於vue中的生命週期，其實在剛開始接觸vue的時候就有了解過，但一直都是一知半解的，最近又有用到，所以就藉此機會總結一下。

為了測試這兩個函式，首先在子元件childred.vue中新增乙個資料，分別在兩個函式中列印該資料。

通過上面的列印，我們可以得出以下結論：

只要使用元件，就會觸發上面兩個事件函式；

created中可以運算元據，並且可以實現vue到頁面的影響，也就是說，在created階段就可以發起ajax請求。

繼續對子元件children.vue進行操作：

通過上面的列印，我們不難發現，在進行資料裝載之後，就是vue作用以後的dom。

與上面的生命週期函式不同的是，上面的函式是元件呼叫時自然會發生的，但這兩個函式的發生基於資料改變對頁面的影響，分別獲取改變發生前的dom和改變發生後的dom。所以為了演示這兩個函式，這裡在子元件中新增了乙個資料，並通過按鈕的點選事件開改變該資料的值，從而觸發這兩個生命週期函式。

需要注意的是，beforemount和mounted也能獲取dom，但是這兩個是分別獲取vue啟動前和啟動後的dom，並且只會執行一次，而beforeupdate和updated則是獲取頁面改變前後的dom，可以根據多次的頁面改變而觸發多次。

這兩個函式對應的是子元件在元件中銷毀（v-if = false）時觸發的函式，所以需要在父元件中新增點選事件控制子元件的建立和銷毀，從而觸發這兩個函式。

父元件：

在頁面載入完成後，會觸發建立的兩個函式，當點選按鈕，不停的銷毀建立子元件的時候，就會頻繁觸發銷毀建立函式。

此時，在頁面載入過程中，會觸發建立的連個函式，但是當我們點選按鈕的時候，雖然頁面上有變化，但是並沒有列印，也就是並沒有繼續觸發銷毀和建立。

這是因為在沒有使用keep-alive元件的時候，v-if觸發的是子元件的建立和銷毀，當使用了keep-alive的時候，v-if觸發的子元件的啟用和停用，那麼既然頁面有變換，但是沒有觸發銷毀和建立函式，那我們怎麼知道顯示和隱藏的變化呢，這就是接下來要說的兩個函式了。

這兩個函式就是在元件被啟用和停用是觸發的，保持上面的父元件不變，稍微修改子元件如下：

然後點選按鈕，控制項的顯示和消失的時候，我們就可以看到相關函式的列印結果了。

在實際的運用過程中，如果需要不停的對子元件進行顯示隱藏操作的時候，頻繁的建立銷毀是不被推薦的，此時就可以借助於keep-alive元件和元件的啟用停用來實現功能。