從零開始學 Web 之 Vue.js（三）Vue實例的生命週期

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、vue實例的生命週期

vue實例的生命週期指的是：從Vue實例建立，運行，到銷燬期間，會伴隨着各類各樣的事件，這些事件統稱爲生命週期。

生命週期事件，也稱生命週期函數，也稱生命週期鉤子。

2、生命週期函數三個階段

建立期間的生命週期函數：beforeCreate 和 created，beforeMount 和 mounted。

運行期間的生命週期函數：beforeUpdate 和 updated

銷燬期間的生命週期函數：beforeDestroy 和 destroyed

3、生命週期函數詳解

建立期間：

• beforeCreate：表示實例徹底被建立出來以前，會執行beforeCreate函數，這時data 和 methods 中的 數據都尚未沒初始化，若是調用data和methods的數據的話，會報錯。
  
• created：實例已經在內存中建立OK，此時 data 和 methods 已經建立OK，此時尚未開始 編譯模板。
• beforeMount：此時已經完成了模板的編譯，可是尚未從內存掛載到頁面中。

注意：在 beforeMount 執行的時候，頁面中的元素，尚未被真正替換過來，只是以前寫的一些模板（好比插值表達式）還只是字符串的形式。

• mounted： 此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示。

運行期間：

• beforeUpdate：data數據更新以後，可是還未渲染到頁面時執行的函數。這時data數據已經更新，可是頁面的數據仍是舊的。
• updated：updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的。

銷燬期間：

• beforeDestroy：實例銷燬以前調用。在這一步，實例上的data，methods等仍然徹底可用。
• destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

整個生命週期的圖示爲：