瞭解vue的生命週期

談到Vue的生命週期，相信許多人並不陌生。但大部分人和我同樣，只是聽過而已，具體用在哪，怎麼用，殊不知道。我在學習vue一個多禮拜後，感受如今還停留在初級階段，對於mounted這個掛載還不是很清楚。放大說，對vue的生命週期不甚瞭解，這對後面的踩坑是至關不利的。

由於咱們有時候會在幾個鉤子函數裏作一些事情，何時作，在哪一個函數裏作，咱們不清楚。因此，弄清楚生命週期是很是有必要的。

一、生命週期介紹

Vue實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷燬等一系列過程，咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。

每個組件或者實例都會經歷一個完整的生命週期，總共分爲三個階段：初始化、運行中、銷燬。

下面是官方給咱們提供的流程圖。

vue2.0生命週期

二、生命週期各個階段

（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，在這裏作善後工做也能夠。