Vue的生命週期是什麼？

生命週期？如果你跟我一樣是非工程出生，八成也不懂它是什麼意思，今天就來特別寫一篇做說明！

當一個Vue網站要創建起來時，會經過一個創建的初始化過程！這個過程如下官方提供的圖片：

圖片來源：(https://vuejs.org/v2/guide/instance.html)

看起來跟天書一樣難懂嗎？很正常，大家一開始都這樣，你不用把它背起來，更不用完全搞懂它，只需要大概了解它的意思就好，因為在學習、製作vue的過程，你會需要查看以上圖表，而在這些實做的過程裡，自然就會了解它了，比死背有用多了！

現在我簡單解說一下圖表，我先把它一分為二：白底紅邊框、紅字的內容是「生命週期鉤子」，其餘就是初「始化的過程」！

• 初始化的過程：例如「需要設置數據監聽」、「編譯模板」、「將實例掛載到DOM並在數據變化時更新DOM」等…。
• 生命週期鉤子：在初始化的過程裡，同時也會運行一些叫做「生命週期鉤子」的函式，這讓我們能在不同的初始化階段添加自己的代碼做處理。

生命週期鉤子簡介

1. beforeCreate：實例初始化。
2. Created：實例建立完成(可以取得 $data)。
3. beforeMount：模板掛載之前(還沒有生成html)。
4. mounted：模板掛載完成。
5. beforeUpdate：如果data發生改變，觸發組件更新，重新渲染。
6. updated：更新完成。
7. beforeDestroy：實例銷毀之前(實例還可以使用)。
8. destroyed：實例已銷毀(所有綁定被解除、所有事件監聽器被移除、所有子實例被移除)。

其中「mounted」算滿常用到的，我特別說一下它，還記得我剛開始寫的「Vue[05]-資料綁定」嗎？忘了可以再去看看(https://ithelp.ithome.com.tw/articles/10201593)。
以那篇範例來講，在生命週期圖表裡「mounted」之前就如下：

<h1>{{ title }}</h1>`

那「mounted」之後呢？就像下面我寫的：

<h1>vue好簡單</h1>`

以上，相信你因該多少體會到了，在mounted的時候調用屬性、方法會是很好的時機喔！
比如說我要做一個大圖輪播的Banner，它每5秒換下一張圖，而且當我按下「下一張」圖片換圖後，可以重新計算5秒換圖！這時就在mounted()下加入一個倒數計時換圖的函式就行了！