概念

一個Vue 實例從開始創建、初始化數據、編譯模板、掛載 DOM、渲染→更新→渲染、卸載等一系列過程，這就是 Vue 的生命周期。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。

Vue實例的生命周期全過程（圖）

Vue實例的生命周期，主要分為三個階段，每個階段都會執行不同的鉤子函數，分別為：

掛載(初始化相關屬性,例如watch屬性，method屬性)
beforeCreate
created
beforeMount
mounted

更新(元素或組件的變更操作)
beforeUpdate
updated

銷毀（銷毀相關屬性）
beforeDestroy
destroyed

八大生命周期的特點

beforeCreate: Vue實例初始化之后，以及事件初始化，以及組件的父子關系確定后執行該鉤子函數，一般在開發中很少使用。
created: 在調用該方法之前，初始化會被使用到的狀態，狀態包括props,methods,data,computed,watch。
而且會實現對data中屬性的監聽，也就是在created的時候數據已經和data屬性進行了綁定。(放在data中的屬性當值發生改變的時候，視圖也會改變)。同時也會對傳遞到組件中的數據進行校驗。所以在執行created的時候，所有的狀態都初始化完成，我們也完全可以在該階段發送異步的ajax請求，獲取數據。但是，在created方法中，是無法獲取到對應的的$el選項,也就是無法獲取DOM。
created方法執行完畢后，下面會判斷對象中有沒有el選項。如果有，繼續執行下面的流程，也就是判斷是否有template選項，如果沒有el選項，則停止整個生命周期的流程，直到執行了vm.$mount(el)。
接下來會觸發 beforeMount 這個鉤子函數。在執行該鉤子函數的時候，虛擬 DOM 已經創建完成，馬上就要渲染了，在這里可以更改 data 中的數據，不會觸發 updated 。
當整個組件掛在完成后，有可能會進行數據的修改，當Vue發現data中的數據發生了變化，會觸發對應組件的重新渲染，先后調用了beforeUpdate 和updated鉤子函數。
在updated之前beoreUpdate之后有一個非常重要的操作就是虛擬DOM會重新構建，也就是新構建的虛擬DOM與上一次的虛擬DOM樹利用diff算法進行對比之后重新渲染。而到了updated這個方法，就表示數據已經更新完成，DOM也重新render完成。
beforeDestroy 這個鉤子函數在實例銷毀前調用，在這一步，實例仍然可用。在該方法中，可以做一些清理的工作，例如：清除定時器等。
執行到destroyed鉤子函數的時候，Vue實例已經被銷毀，所有的事件監聽器會被移除，所有的子實例也會被銷毀，斷開DOM與數據之間的關聯。