Vue的生命周期
?
生命周期圖示.png
什么是生命周期鉤子？
所有的生命周期鉤子自動綁定this上下文到實例中巧鸭，因此你可以訪問數(shù)據(jù)调限，對屬性和方法進行運算。這意味著你不能使用箭頭函數(shù)來定義一個生命周期方法(例如created: () => this.fetchTodos())坠非。
他們在對應的階段做對應的事敏沉。共分為8個階段，接下來一一介紹：
beforeCreate
當前生命周期是Vue初始化的時候執(zhí)行的鉤子函數(shù)炎码，此時盟迟，data和methods還未將自身屬性和方法代理到Vue的實例上。因此潦闲，在當前生命周期不能訪問data中的屬性和methods中的方法攒菠。
當前生命周期在執(zhí)行時組件還未創(chuàng)建，因此歉闰，可以在當前組件中進行l(wèi)oading動畫的顯示辖众。
created創(chuàng)建后*
當前生命周期函數(shù)是組件在創(chuàng)建后執(zhí)行的，因此和敬，可以在當前生命周期中進行前后端數(shù)據(jù)的交互凹炸。
當前生命周期在執(zhí)行的時候，會將data的屬性進行數(shù)據(jù)劫持昼弟，給每一個屬性添加getter和setter方法啤它。
當前生命周期在執(zhí)行時，會將data的屬性和methods的方法代理到Vue的實例中。
beforeMount掛載前
當前生命周期是組件掛載在頁面之前會執(zhí)行的鉤子函數(shù)变骡，數(shù)據(jù)也初始化完成离赫，但是數(shù)據(jù)的雙向綁定還是顯示{{}}，可以在當前生命周期中對數(shù)據(jù)進行最后的修改锣光。（這是因為Vue采用了Virtual DOM（虛擬Dom）技術笆怠。先占住了一個坑。）
當前生命周期中的數(shù)據(jù)和模板還未進行結合誊爹，因此蹬刷，訪問不到真實的DOM結構。
mounted掛載后*****
當前生命周期在組件被掛載到頁面的時候執(zhí)行的函數(shù)频丘，數(shù)據(jù)和模板已經(jīng)結合办成，在上一個周期占位的數(shù)據(jù)把值給渲染進去÷可以在這邊請求迂卢，不過created請求會更好一些⊥┨溃可以通過this.$refs訪問真實的DOM結構而克。
場景：在當前的生命周期函數(shù)中進行的實例化（Swiper BScroll echarts）
ref語法：
給需要獲取真實DOM結構的元素添加ref屬性。（名字必須唯一）eg:<p ref="name"></p>
通過this.$refs.名字進行訪問真實的DOM結構
beforeUpdate更新前*
當前生命周期函數(shù)中怔毛，只要是頁面數(shù)據(jù)改變了都會觸發(fā)员萍，但更新的數(shù)據(jù)還未和模板結合，可以訪問到真實的DOM結構拣度，并且能夠對更新的數(shù)據(jù)的檢測和做最后的更改 碎绎。
updated更新后*
當前生命周期函數(shù)中數(shù)據(jù)和模板已經(jīng)進行相結合，可以在這里獲取最新的DOM結構抗果。
如果在當前生命周期函數(shù)中進行實例化操作時筋帖，要進行邊界條件的判斷，否則會造成性能消耗冤馏。
new操作執(zhí)行的時候做了哪些事情日麸？
開辟一塊內存空間，創(chuàng)建一個空對象
將所創(chuàng)建的對象的__ proto __指向構造函數(shù)的prototype
執(zhí)行構造函數(shù)中的代碼宿接，將this的指向赘淮，指向當前的內存空間
返回該對象（除非構造函數(shù)中返回了一個對象或者函數(shù)）
beforeDestory銷毀前*
當前生命周期會在組件被銷毀的時候去執(zhí)行，可以訪問到真實的DOM結構睦霎，進行事件的解綁，定時器的清除走诞。
destroyed()銷毀后
在當前生命周期斷開了與vue的關聯(lián)副女，訪問不到真實的DOM結構。
（對象停止并從內存中刪除）
keep-alive
keep-alive是Vue的內置組件蚣旱，其中的生命周期只會走一遍碑幅，并且會增加activated和deactivaed生命周期戴陡，用以其他的業(yè)務邏輯。
通常用來包裹動態(tài)切換的路由或組件沟涨，防止組件頻繁地創(chuàng)建和銷毀恤批，從而達到性能優(yōu)化的效果。
keep-alive常用的屬性
include：字符串或正則表達式裹赴。匹配的組件會被緩存喜庞。
exclude：字符串或正則表達式。匹配的組件都不會被緩存棋返。
max：數(shù)字延都。最多可以緩存多少組件實例。
activated活躍狀態(tài)
當前組件顯示時執(zhí)行的生命周期
deactivated緩存狀態(tài)
當前組件緩存時執(zhí)行的生命周期
errorCaptured
當捕獲一個來自子孫組件的錯誤時被調用睛竣。
此鉤子會收到三個參數(shù)：錯誤對象晰房、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播射沟。
作者：learninginto
鏈接：http://www.reibang.com/p/5fed3ec082c2
來源：簡書
著作權歸作者所有殊者。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處验夯。
