前言
最近做項目碰到一個很頭大的問題--從a頁面跳到b頁面進行編輯，編輯完再返回a頁面，卻沒走a頁面的鈎子函數mounted，數據沒有更新
經過一番面向百度研究，終於找到了問題所在。接下來就記錄一下這個問題及其解決的方法。
原理
其實這個問題主要涉及到vue生命周期，對vue生命周期理解不夠深刻的同學可以去官網學習一下：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
解決這個問題的關鍵就在於對keep-alive的理解和activated鈎子函數的使用。
當在項目中引入keep-alive的時候，頁面第一次進入，鈎子函數的觸發順序created -> mounted -> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。
我們知道 keep-alive 之后，頁面模板第一次初始化解析變成HTML片段后，再次進入就不再重新解析而是讀取內存中的數據，即，只有當數據變化時，才使用VirtualDOM進行diff更新。故，頁面進入的數據獲取應該在activated中也放一份。數據加載完畢手動操作DOM的部分也應該在activated中執行才會生效。
所以，應該activated中留一份數據獲取的代碼，或者不要created部分，直接將created中的代碼轉移到activated中。
html結構
js部分--vue生命周期
beforeCreate () {
console.log('在實例初始化之前調用')
}
created () {
console.log('在實例初始化之后調用，經常用於操作數據，發起ajax請求')
}
beforeMount () {
console.log('在掛載開始之前被調用，如果是在服務器端渲染時不被調用；在這個函數里，無法獲取元素')
}
mounted () {
console.log('在掛載后被調用，也不能在服務器端渲染時被調用；這個函數里，是可以獲取元素，並進行操作的')
}
beforeUpdate () {
console.log('視圖層數據更新前調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM')
}
updated () {
console.log('視圖層數據更新后調用')
}
beforeDestroy () {
console.log('實例銷毀之前調用，在被銷毀的組件中進行調用;有一些操作，會在實例已經銷毀的時候還在運行，這時候為了性能考慮，就在這里結束哪些操作')
}
destroyed () {
console.log('實例銷毀后調用。')
}
activated和deactivated配合keep-alive標簽使用!
activated () {
console.log('實例被激活時使用，用於重復激活一個實例的時候')
}
deactivated () {
console.log('實例沒有被激活時')
}
總結
keep-alive是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM；導致在組件mounted鈎子中調用的刷新頁面內容時，這個鈎子沒有被調用。
故：使用Vue組件切換過程，執行鈎子activated(keep-alive組件激活時調用)，而不是掛載鈎子mounted。