最近在看Vue的生命周期，就把各個流程整理一篇內功心法，觀察各個階段虛擬dom樹和真實dom樹的渲染情況，每一個組件或者實例都會經歷一個完整的生命周期，大體總共分為三個階段：初始化、運行中、銷毀。

　　且聽我一步一步解析：

　　1. 實例、組件通過new Vue() 創建出來之后會初始化事件和生命周期，然后就會執行beforeCreate鉤子函數，這個時候，數據還沒有掛載到，只是一個空殼，無法訪問到數據和真實的dom，一般不做操作

　　2. 掛載數據，綁定事件等等，然后執行created函數，這個時候已經可以使用到數據，也可以更改數據,在這里同步更改數據不會觸發updated函數，一般可以在這里做初始數據的獲取。 做異步ajax，綁定初始化事件

　　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，在這里做善后工作也可以

　　三大階段

　　組件的生命周期鉤子函數基本大致可以分為三個階段： 初始化、運行中、銷毀

　　初始化階段：

　　beforeCreate() created(可以獲取數據) beforeMount (render) mounted

　　運行中階段：

　　beforeUpdate updated

　　銷毀階段：

　　beforeDestroy destroyed

　　接下來就是對應的代碼階段了哦，大家看一下這里的代碼示例：

　　最后配上我們的生命周期流程圖

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!