vue2的keep-alive的總結

keep-alive 是Vue的内置元件，能在元件切換過程中将狀态保留在記憶體中，防止重複渲染DOM。結合vue-router中使用，可以緩存某個view

的整個内容。

基本使用如下：

<keep-alive>
  <component>
    <!-- 該元件将被緩存！ -->
  </component>
</keep-alive>

一般有這樣的需求，當我們第一次進入清單頁需要請求一下資料，當我從清單頁進入詳情頁，詳情頁不緩存也需要請求下資料，然後傳回清單頁

有兩個情況：

1. 直接點選浏覽器的後退傳回按鈕。

2. 點選導航欄中的 /list的連結傳回。

那麼針對第一種情況下，我們直接通過後退按鈕時，傳回到清單頁(/list) 是不需要請求資料。

針對第二種情況下，我們通過連結傳回到清單頁是需要請求資料。

是以這邊有三種情況：

1. 預設進來清單頁需要請求資料。

2. 進入詳情頁後，通過浏覽器預設後退按鈕傳回，是不需要ajax的請求的。

3. 進入詳情頁後，通過點選連結傳回到清單頁後，也是需要發ajax請求的。

配置如下：

1. 入口檔案 app.vue 的配置如下：

<!-- 緩存所有的頁面 -->
<keep-alive>
  <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

2. 在router中設定meta屬性，設定 keepAlive: true 表示需要使用緩存，false的話表示不需要使用緩存。且添加滾動行為 scrollBehavior

router/index.js 的配置如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
  mode: 'history', // 通路路徑不帶井号  需要使用 history模式，才能使用 scrollBehavior
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve),  // 使用懶加載
      meta: {
        keepAlive: true  // true 表示需要使用緩存
      }
    },
    {
      path: '/list',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve), // 使用懶加載
      meta: {
        keepAlive: true  // true 表示需要使用緩存  false表示不需要被緩存
      }
    },
    {
      path: '/detail',
      name: 'detail',
      component: resolve => require(['@/views/detail'], resolve) // 使用懶加載
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    // 儲存到 meta 中，備用
    to.meta.savedPosition = savedPosition;
    if (savedPosition) {
      return { x: 0, y: 0 };
    }
    return {};
  }
});
export default router;

3. list.vue 代碼如下：

<template>
  <div class="hello">
    <h1>vue</h1>
    <h2>{{msg}}</h2>
    <router-link to="/detail">跳轉到detail頁</router-link>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  methods: {
    ajaxRequest() {
      const obj = {
        'aa': 1
      };
      Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {
        console.log(res);
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      /*
       如果 to.meta.savedPosition === undefined 說明是重新整理頁面或可以叫第一次進入頁面 需要重新整理資料
       如果savedPosition === null, 那麼說明是點選了導航連結;
       此時需要重新整理資料，擷取新的清單内容。
       否則的話 什麼都不做，直接使用 keep-alive中的緩存
       */
      if (to.meta.savedPosition === undefined) {
        vm.ajaxRequest();
      }
      if (to.meta.savedPosition === null) {
        vm.ajaxRequest();
      }
    })
  }
};
</script>

4. detail.vue 代碼如下：

<template>
  <div class="list">
    <h1>{{msg}}</h1>
    <router-link to="/list">傳回清單頁</router-link>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  created() {
    this.ajaxRequest();
  },
  methods: {
    ajaxRequest() {
      const obj = {
        'aa': 1
      };
      Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => {
        console.log(res);
      });
    }
  }
};
</script>

二：使用router.meta 擴充

假設現在有3個頁面，需求如下：

1. 預設有A頁面，A頁面進來需要一個請求。

2. B頁面跳轉到A頁面，A頁面不需要重新請求。

3. C頁面跳轉到A頁面，A頁面需要重新請求。

實作方式如下：

在 A 路由裡面設定 meta 屬性：

{
  path: '/a',
  name: 'A',
  component: resolve => require(['@/views/a'], resolve),
  meta: {
    keepAlive: true  // true 表示需要使用緩存
  }
}

是以router/index下的所有代碼變為如下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 通路路徑不帶井号  需要使用 history模式，才能使用 scrollBehavior
  base: '/page/app',  // 配置單頁應用的基路徑
  routes: [
    {
      path: '/',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve),  // 使用懶加載
      meta: {
        keepAlive: true  // true 表示需要使用緩存
      }
    },
    {
      path: '/list',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve), // 使用懶加載
      meta: {
        keepAlive: true  // true 表示需要使用緩存  false表示不需要被緩存
      }
    },
    {
      path: '/detail',
      name: 'detail',
      component: resolve => require(['@/views/detail'], resolve) // 使用懶加載
    },
    {
      path: '/a',
      name: 'A',
      component: resolve => require(['@/views/a'], resolve),
      meta: {
        keepAlive: true  // true 表示需要使用緩存
      }
    },
    {
      path: '/b',
      name: 'B',
      component: resolve => require(['@/views/b'], resolve)
    },
    {
      path: '/c',
      name: 'C',
      component: resolve => require(['@/views/c'], resolve)
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    // 儲存到 meta 中，備用
    to.meta.savedPosition = savedPosition;
    if (savedPosition) {
      return { x: 0, y: 0 };
    }
    return {};
  }
});
export default router;

在 B 元件裡面設定 beforeRouteLeave

beforeRouteLeave(to, from, next) {
  // 設定下一個路由meta
  to.meta.keepAlive = true; // 讓A緩存，不請求資料
  next(); // 跳轉到A頁面
}

B元件所有代碼如下：

<template>
  <div class="list">
    <h1>{{msg}}</h1>
    <router-link to="/a">傳回a頁面</router-link>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      msg: 'Welcome to B Page'
    };
  },
  created() {},
  methods: {
  },
  beforeRouteLeave(to, from, next) {
    // 設定下一個路由meta
    to.meta.keepAlive = true; // 讓A緩存，不請求資料
    next(); // 跳轉到A頁面
  }
};
</script>

在 C 元件裡面設定 beforeRouteLeave：

beforeRouteLeave(to, from, next) {
  // 設定下一個路由meta
  to.meta.keepAlive = false; // 讓A不緩存，重新請求資料
  console.log(to)
  next(); // 跳轉到A頁面
}

c元件所有代碼如下：

<template>
  <div class="list">
    <h1>{{msg}}</h1>
    <router-link to="/a">傳回a頁面</router-link>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      msg: 'Welcome to B Page'
    };
  },
  created() {},
  methods: {
  },
  beforeRouteLeave(to, from, next) {
    // 設定下一個路由meta
    to.meta.keepAlive = false; // 讓A不緩存，重新請求資料
    console.log(to)
    next(); // 跳轉到A頁面
  }
};
</script>

a元件内的所有的代碼如下：

<template>
  <div class="hello">
    <h1>vue</h1>
    <h2>{{msg}}</h2>
    <router-link to="/b">跳轉到b頁面</router-link>
    <router-link to="/c">跳轉到c頁面</router-link>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data () {
    return {
      msg: 'Welcome to A Page'
    };
  },
  methods: {
    ajaxRequest() {
      const obj = {
        'aa': 1
      };
      Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {});
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      /*
       如果 to.meta.savedPosition === undefined 說明是重新整理頁面或可以叫第一次進入頁面 需要重新整理資料
       如果to.meta.keepAlive === false, 那麼說明是需要請求的;
       此時需要重新整理資料，擷取新的清單内容。
       否則的話 什麼都不做，直接使用 keep-alive中的緩存
       */
      if (to.meta.savedPosition === undefined) {
        vm.ajaxRequest();
      }
      if (!to.meta.keepAlive) {
        vm.ajaxRequest();
      }
    })
  }
};
</script>

注意 b元件到a元件不重新請求資料 (包括點選連結和浏覽器後退按鈕)，c元件到a元件請求資料(包括點選連結和浏覽器後退按鈕).

檢視github上的代碼

vue2的keep-alive的總結

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條