vue2中的keep-alive使用總結(jié)及注意事項(xiàng)

更新時(shí)間：2022年08月24日 09:11:08 作者：龍恩0707

vue2.0提供了一個(gè)keep-alive組件用來(lái)緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項(xiàng)，需要的朋友參考下吧

keep-alive 是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。結(jié)合vue-router中使用，可以緩存某個(gè)view的整個(gè)內(nèi)容。

基本使用如下：

<keep-alive>
 <component>
 <!-- 該組件將被緩存！ -->
 </component>
</keep-alive>

一般有這樣的需求，當(dāng)我們第一次進(jìn)入列表頁(yè)需要請(qǐng)求一下數(shù)據(jù)，當(dāng)我從列表頁(yè)進(jìn)入詳情頁(yè)，詳情頁(yè)不緩存也需要請(qǐng)求下數(shù)據(jù)，然后返回列表頁(yè)

有兩個(gè)情況：

1. 直接點(diǎn)擊瀏覽器的后退返回按鈕。

2. 點(diǎn)擊導(dǎo)航欄中的 /list的鏈接返回。

那么針對(duì)第一種情況下，我們直接通過(guò)后退按鈕時(shí)，返回到列表頁(yè)(/list) 是不需要請(qǐng)求數(shù)據(jù)。

針對(duì)第二種情況下，我們通過(guò)鏈接返回到列表頁(yè)是需要請(qǐng)求數(shù)據(jù)。

所以這邊有三種情況：

1. 默認(rèn)進(jìn)來(lái)列表頁(yè)需要請(qǐng)求數(shù)據(jù)。

2. 進(jìn)入詳情頁(yè)后，通過(guò)瀏覽器默認(rèn)后退按鈕返回，是不需要ajax的請(qǐng)求的。

3. 進(jìn)入詳情頁(yè)后，通過(guò)點(diǎn)擊鏈接返回到列表頁(yè)后，也是需要發(fā)ajax請(qǐng)求的。

配置如下：

1. 入口文件 app.vue 的配置如下：

<!-- 緩存所有的頁(yè)面 -->
<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中設(shè)置meta屬性，設(shè)置 keepAlive: true 表示需要使用緩存，false的話表示不需要使用緩存。且添加滾動(dòng)行為 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', // 訪問(wèn)路徑不帶井號(hào) 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置單頁(yè)應(yīng)用的基路徑
 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">跳轉(zhuǎn)到detail頁(yè)</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 說(shuō)明是刷新頁(yè)面或可以叫第一次進(jìn)入頁(yè)面 需要刷新數(shù)據(jù)
  如果savedPosition === null, 那么說(shuō)明是點(diǎn)擊了導(dǎo)航鏈接;
  此時(shí)需要刷新數(shù)據(jù)，獲取新的列表內(nèi)容。
  否則的話 什么都不做，直接使用 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">返回列表頁(yè)</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 擴(kuò)展

假設(shè)現(xiàn)在有3個(gè)頁(yè)面，需求如下：

1. 默認(rèn)有A頁(yè)面，A頁(yè)面進(jìn)來(lái)需要一個(gè)請(qǐng)求。

2. B頁(yè)面跳轉(zhuǎn)到A頁(yè)面，A頁(yè)面不需要重新請(qǐng)求。

3. C頁(yè)面跳轉(zhuǎn)到A頁(yè)面，A頁(yè)面需要重新請(qǐng)求。

實(shí)現(xiàn)方式如下：

在 A 路由里面設(shè)置 meta 屬性：

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

所以router/index下的所有代碼變?yōu)槿缦拢?/p>

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

Vue.use(Router);

const router = new Router({
 mode: 'history', // 訪問(wèn)路徑不帶井號(hào) 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置單頁(yè)應(yīng)用的基路徑
 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 組件里面設(shè)置 beforeRouteLeave

beforeRouteLeave(to, from, next) {
 // 設(shè)置下一個(gè)路由meta
 to.meta.keepAlive = true; // 讓A緩存，不請(qǐng)求數(shù)據(jù)
 next(); // 跳轉(zhuǎn)到A頁(yè)面
}

B組件所有代碼如下：

<template>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a頁(yè)面</router-link>
 </div>
</template>

<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 設(shè)置下一個(gè)路由meta
 to.meta.keepAlive = true; // 讓A緩存，不請(qǐng)求數(shù)據(jù)
 next(); // 跳轉(zhuǎn)到A頁(yè)面
 }
};
</script>

在 C 組件里面設(shè)置 beforeRouteLeave：

beforeRouteLeave(to, from, next) {
 // 設(shè)置下一個(gè)路由meta
 to.meta.keepAlive = false; // 讓A不緩存，重新請(qǐng)求數(shù)據(jù)
 console.log(to)
 next(); // 跳轉(zhuǎn)到A頁(yè)面
}

c組件所有代碼如下：

<template>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a頁(yè)面</router-link>
 </div>
</template>

<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 設(shè)置下一個(gè)路由meta
 to.meta.keepAlive = false; // 讓A不緩存，重新請(qǐng)求數(shù)據(jù)
 console.log(to)
 next(); // 跳轉(zhuǎn)到A頁(yè)面
 }
};
</script>

a組件內(nèi)的所有的代碼如下：

<template>
 <div class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/b">跳轉(zhuǎn)到b頁(yè)面</router-link>
 <router-link to="/c">跳轉(zhuǎn)到c頁(yè)面</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 說(shuō)明是刷新頁(yè)面或可以叫第一次進(jìn)入頁(yè)面 需要刷新數(shù)據(jù)
  如果to.meta.keepAlive === false, 那么說(shuō)明是需要請(qǐng)求的;
  此時(shí)需要刷新數(shù)據(jù)，獲取新的列表內(nèi)容。
  否則的話 什么都不做，直接使用 keep-alive中的緩存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (!to.meta.keepAlive) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

注意 b組件到a組件不重新請(qǐng)求數(shù)據(jù) (包括點(diǎn)擊鏈接和瀏覽器后退按鈕)，c組件到a組件請(qǐng)求數(shù)據(jù)(包括點(diǎn)擊鏈接和瀏覽器后退按鈕).

查看github上的代碼

總結(jié)

以上所述是小編給大家介紹的vue2中的keep-alive使用總結(jié)及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: