深入理解Vue的生命週期
談到 Vue 的生命週期，相信許多人並不陌生。但大部分人和我一樣，只是聽過而已，具體用在哪，怎麼用，卻不知道。我在學習 vue 一個多禮拜後，感覺現在還停留在初級階段，對於 mounted這個掛載還不是很清楚。放大說，對vue的生命週期不甚瞭解，這對後面的踩坑是相當不利的。
因為我們有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。所以，弄清楚生命週期是非常有必要的。
1、生命週期介紹
Vue 例項有一個完整的生命週期，也就是從 開始建立、初始化資料、編譯模板、掛載 Dom 、渲染 → 更新 → 渲染、銷燬 等一系列過程，我們稱這是 Vue 的生命週期。通俗說就是 Vue 例項從建立到銷燬的過程，就是生命週期。
每一個元件或者例項都會經歷一個完整的生命週期，總共分為三個階段： 初始化、執行中、銷燬 。
2、生命週期各個階段
（1） 元件例項剛剛被建立： 例項、元件通過 new Vue() 創建出來之後會初始化事件和生命週期，然後就會執行 beforeCreate 鉤子函式，這個時候，資料還沒有掛載呢，只是一個空殼，無法訪問到資料和真實的 dom ，一般不做操作 。
（2） 例項已經建立完成： 掛載資料，繫結事件等等，然後執行 created 函式，這個時候已經可以使用到資料，也可以更改資料 , 在這裡更改資料不會觸發 updated 函式，在這裡可以在渲染前倒數第二次更改資料的機會，不會觸發其他的鉤子函式，一般可以在這裡做初始資料的獲取 。
（3） 模板編譯之前： 接下來開始找例項或者元件對應的模板，編譯模板為虛擬 dom 放入到 render 函式中準備渲染，然後執行 beforeMount 鉤子函式，在這個函式中虛擬 dom 已經建立完成，馬上就要渲染 , 在這裡也可以更改資料，不會觸發 updated ，在這裡可以在渲染前最後一次更改資料的機會，不會觸發其他的鉤子函式，一般可以在這裡做初始資料的獲取 。
（4） 模板編譯之後： 接下來開始 render ，渲染出真實 dom ，然後執行 mounted 鉤子函式，此時，元件已經出現在頁面中，資料、真實 dom 都已經處理好了 , 事件都已經掛載好了，可以在這裡操作真實 dom 等事情 ...
（5） 元件更新之前： 當元件或例項的資料更改之後，會立即執行 beforeUpdate ，然後 vue 的虛擬 dom 機制會重新構建虛擬 dom 與上一次的虛擬 dom 樹利用 diff 演算法進行對比之後重新渲染，一般不做什麼事兒 。
（6） 元件更新完畢 ： 當更新完成後，執行 updated ，資料已經更改完成， dom 也重新 render 完成，可以操作更新後的虛擬 dom 。
（7） 元件銷燬前： 當經過某種途徑呼叫 $destroy 方法後，立即執行 beforeDestroy ，一般在這裡做一些善後工作，例如清除計時器、清除非指令繫結的事件等等 。
（8） 元件銷燬後： 元件的資料繫結、監聽 ... 去掉後只剩下 dom 空殼，這個時候，執行 destroyed ，在這裡做善後工作也可以 。