上一篇文章講解“觀察者”，本篇文章講解“生命週期”。
每個Vue實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到DOM、在數據變化時更新DOM等。同時在這個過程中也會運行一些叫做生命週期鉤子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。
生命週期一共有八個階段，下面用實例進行理解。
新建lifecycle.html文件：
瀏覽器訪問：
1. 創建與掛載
DOM結構與數據已渲染輸出，看一下控制檯輸出的vue對象實例化輸出情況。
2. 更新
以上是beforeCreate、created、beforeMount、mounted情況，修改input框內數據，當數據改變時，觸發beforeUpdate與updated。
注意
1. this.$el是一個對象，相當於一個指針，因此當你使用console.log輸出之後，其內容並沒有真正顯示，而當你點開下面的箭頭展開具體內容時，顯示的是該指針指向對象的當前內容，因此在你看來beforeUpdate與updated兩個都一樣。當輸出真正的DOM結構時才能看出來。
3. 銷燬
點擊頁面中“銷燬”按鈕，調用銷燬函數，測試銷燬前後的情況。
注意：
1. 銷燬是銷燬對象中的方法，跟數據無關。
2. created 我們一般把ajax請求數據的代碼放到這個階段。
3. beforeMount 這個階段主要是提前控制元素的樣式，防止閃動。
4. mounted 一般針對第三方的插件初始化都放在這裡，比如swiper.js
關注卓象程序員，定期發佈技術文章
下一篇講解“瀏覽器安裝vue插件”
分享到:
閱讀更多 卓象程序員 的文章
