問題

Q1：從a頁面跳到b頁面進行編輯，編輯完再返回a頁面，卻沒走a頁面的鉤子函數(shù)mounted，數(shù)據(jù)沒有更新
Q-2：a--b--a--b，b頁面的mounted沒有執(zhí)行

原理

其實這個問題主要涉及到vue生命周期，官網(wǎng)鏈接：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

解決這個問題的關(guān)鍵就在于對keep-alive的理解和activated鉤子函數(shù)的使用。

當(dāng)在項目中引入keep-alive的時候，頁面第一次進入，鉤子函數(shù)的觸發(fā)順序created -> mounted -> activated，退出時觸發(fā)deactivated。當(dāng)再次進入（前進或者后退）時，只觸發(fā)activated。

我們知道 keep-alive 之后，頁面模板第一次初始化解析變成HTML片段后，再次進入就不再重新解析而是讀取內(nèi)存中的數(shù)據(jù)，即，只有當(dāng)數(shù)據(jù)變化時，才使用VirtualDOM進行diff更新。故，頁面進入的數(shù)據(jù)獲取應(yīng)該在activated中也放一份。數(shù)據(jù)加載完畢手動操作DOM的部分也應(yīng)該在activated中執(zhí)行才會生效。

所以，應(yīng)該activated中留一份數(shù)據(jù)獲取的代碼，或者不要created部分，直接將created中的代碼轉(zhuǎn)移到activated中。

keepAlive

<keep-alive :include="keepAlive">
        <router-view></router-view>
</keep-alive>

beforeRouteLeave(to, from, next) {
        if (to.path === '/schoolDataStandard/edit') {
            this.$store.commit('setKeepAlive',['schoolStandard'])  //schoolStandard 頁面的name
        } else {
            // 否則keepAlive設(shè)為 false
            this.$store.commit('setKeepAlive',[])
        }
        next();
    },

vue生命周期

　　beforeCreate () {
　　　　console.log('在實例初始化之前調(diào)用')
　　}，
　　created () {
　　　　console.log('在實例初始化之后調(diào)用，經(jīng)常用于操作數(shù)據(jù)，發(fā)起ajax請求')
　　}，
　　beforeMount () {
            console.log('在掛載開始之前被調(diào)用，如果是在服務(wù)器端渲染時不被調(diào)用；在這個函數(shù)里，無法獲取元素')
　　}，
　　mounted () {
　　　　console.log('在掛載后被調(diào)用，也不能在服務(wù)器端渲染時被調(diào)用；這個函數(shù)里，是可以獲取元素，并進行操作的')，
　　}，
　　beforeUpdate () {
　　　　console.log('視圖層數(shù)據(jù)更新前調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM')
　　}，
　　updated () {
　　　　console.log('視圖層數(shù)據(jù)更新后調(diào)用')
　　}，
　　beforeDestroy () {
　　　　console.log('實例銷毀之前調(diào)用，在被銷毀的組件中進行調(diào)用;有一些操作，會在實例已經(jīng)銷毀的時候還在運行，這時候為了性能考慮，就在這里結(jié)束哪些操作')
　　}，
　　destroyed () {
　　　　console.log('實例銷毀后調(diào)用。')
　　}，
　　**activated和deactivated配合keep-alive標簽使用!**
　　activated () {
　　　　console.log('實例被激活時使用，用于重復(fù)激活一個實例的時候')
　　}，
　　deactivated () {
　　　　console.log('實例沒有被激活時')
　　}，

總結(jié)

keep-alive是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM；導(dǎo)致在組件mounted鉤子中調(diào)用的刷新頁面內(nèi)容時，這個鉤子沒有被調(diào)用。

使用Vue組件切換過程，執(zhí)行鉤子activated(keep-alive組件激活時調(diào)用)，而不是掛載鉤子mounted。