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

keep-alive的作用以及好處

在做電商有關的項目中，當我們第一次進入列表頁需要請求一下數據，當我從列表頁進入詳情頁，詳情頁不緩存也需要請求下數據，然后返回列表頁，這時候我們使用keep-alive來緩存組件，防止二次渲染，這樣會大大的節省性能。

廢話不多說直接上碼，一般是在 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，比如監聽狀態變化，包括但不限于監聽路由的變化，某參數的變化，某時間節點的變化等等。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。