Vue2.0 做應用必有的需求就是頁面資料需要做快取，不用每次進入頁面都要把資料重新請求一遍，每次頁面切換都有段等待資料相應時間，這個使用者體驗可想有多麼蛋疼，所以頁面快取是必要的，啥時候需要更新頁面資料呢？可以監聽狀態變化，或者是手動下拉重新整理重新請求資料，醬紫，我想使用者體驗會做的更好。

廢話不多說直接上碼，一般是在 src/App.vue 設定開啟 keep-alive 實現頁面資料快取：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>
 

列舉幾個常用的 hook 方法，如下： 

export default {
  data() {
    return {
    
    }
  },
  created: function() {
    console.log("the hook of created is done!");
  },
  mounted: function() {
    console.log("the hook of mounted is done!");
  },
  activated: function() {
    console.log("the hook of activated is done!");
  },
  deactivated: function() {
    console.log("the hook of deactivated is done!");
  }
}
 

首次進來 hook 的觸發順序 created-> mounted-> activated，退出時觸發 deactivated： 

// 控制檯列印結果
the hook of created is done!
the hook of mounted is done!
the hook of activated is done!
the hook of deactivated is done!

二次進來 hook 只觸發 activated，退出時觸發 deactivated：

// 控制檯列印結果
the hook of activated is done!
the hook of deactivated is done!
 

所以這就是為什麼有些人開啟 keep-alive 之後，created 和 mounted 註冊的 pageInt 方法不觸發的原因了，因為 keep-alive 把它們遮蔽了，也就是把資料快取起來，所以不再請求。

如果你的某些頁面一定要實時請求，你可以直接在 activated 這個 hook 做 pageInt，就不要在 created 和 mounted 上面註冊 pageInt 方法了。

還有你可以選擇性 pageInt，比如監聽狀態變化，包括但不限於監聽路由的變化，某引數的變化，某時間節點的變化等等。