一搀罢、Vue生命周期
生命周期.png.png
- vue 生命周期有 創(chuàng)建、掛載晦雨、更新架曹、銷毀 四個階段
- 創(chuàng)建前（beforeCreate）：實例初始化之后，this指向創(chuàng)建的實例闹瞧，不能訪問到data音瓷、computed、watch夹抗、methods上的方法和數(shù)據(jù)绳慎。用于初始化非響應式變量
- 創(chuàng)建后（created）：可訪問data、computed漠烧、watch杏愤、methods上的方法和數(shù)據(jù)，未掛載到DOM已脓，不能訪問到
refs屬性內容為空。用于簡單的ajax請求度液，頁面的初始化
- 掛載前（beforeMount）：編譯模板為虛擬dom放入到render函數(shù)中準備渲染厕宗，然后執(zhí)行beforeMount鉤子函數(shù)画舌，虛擬dom已經創(chuàng)建完成，馬上就要渲染已慢，在這里也可以更改數(shù)據(jù)曲聂，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取佑惠，可以訪問 el(掛載根節(jié)點) 但是無法訪問 refs(真實節(jié)點)
- 掛載后（mounted）：組件已經出現(xiàn)在頁面中朋腋，數(shù)據(jù)、真實dom都已經處理好了,事件都已經掛載好了膜楷，可以在這里操作真實dom等事情旭咽。用于獲取數(shù)據(jù)后操作真實的DOM。
- 更新前（beforeUpdate）：當組件或實例的數(shù)據(jù)更改之后赌厅，會立即執(zhí)行beforeUpdate穷绵，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒
- 更新后（updated）：當更新完成后特愿，執(zhí)行updated请垛，數(shù)據(jù)已經更改完成，dom也重新render完成洽议，可以操作更新后的虛擬dom
- 銷毀前（beforeDestroy）： 當經過某種途徑調用$destroy方法后宗收，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作亚兄，例如清除計時器混稽、清除非指令綁定的事件等等
- 銷毀后（destroyed）：組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼审胚，這個時候匈勋，執(zhí)行destroyed，在這里做善后工作也可以
二膳叨、keep-alive 鉤子函數(shù)
- activated：keep-alive 組件激活時調用洽洁。
- deactivated：keep-alive 組件停用時調用。
注意：當引入keep-alive的時候菲嘴，頁面第一次進入饿自，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated龄坪。當再次進入（前進或者后退）時昭雌，只觸發(fā)activated。
三健田、組件路由鉤子函數(shù)
- beforeRouteEnter(進入組件之前)：不能訪問 this烛卧，因為守衛(wèi)在導航確認前被調用,因此即將登場的新組件還沒被創(chuàng)建。不過妓局，你可以通過傳一個回調給 next來訪問組件實例总放。在導航被確認的時候執(zhí)行回調呈宇，并且把組件實例作為回調方法的參數(shù)。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實例
})
}
- beforeRouteUpdate(子路由切換時執(zhí)行)：
- beforeRouteLeave(離開組件之前)：通常用來提示用戶在未保存某些修改而后退時的提示局雄。該導航可以通過 next(false) 來取消甥啄。
beforeRouteLeave (to, from , next) {
if ('用戶保存了') {
next()
} else {
next(false)
}
}
四、全局路由鉤子函數(shù)
- beforeEach（進入路由之前）：權限控制哎榴，開啟進度條
- beforeResolve（路由確認時解析守衛(wèi)）：
- beforeEach（進入路由之后）：關閉進度條
