vue中keep-alive实现页面缓存

﹏ヽ暗。殇╰゛Y 2023-03-01 10:30 11阅读 0赞

## keep-alive ##

*  props:
 *  `include` \- 字符串或者正则表达式。只有名称匹配的组件才会被缓存
 *  `exclude` \- 字符串或正则表达式。任何名称匹配的组件都不会被缓存
 *  `max` \- 数字。最多可以缓存多少组件实例
 *  用法：  
    `<keep-alive>` 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 `<transition>` 相似，`<keep-alive>` 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。  
    当组件在 `<keep-alive>` 内被切换，它的 `activated` 和 `deactivated` 这两个生命周期钩子函数将会被对应执行。

> 在 2.2.0 及其更高版本中， `activated` 和 `deactivated` 将会在 `<keep-alive>` 树内的所有嵌套组件中触发

主要用于保留组件状态或避免重新渲染

<keep-alive>
       <router-view></router-view>
     </keep-alive>
     
     <keep-alive>
       <router-view v-if="a >1"></router-view>
       <router-view v-else></router-view>
     </keep-alive>
     
     <transition>
       <keep-alive>
         <router-view></router-view>
       </keep-alive>
     </transition>

**注意**`<keep-alive>` 是用在其一个直属的子组件被开关的情形。如果你在其中有 `v-for` 则不会工作。如果有上述的多个条件性的子元素，`<keep-alive>` 要求同时只有一个子元素被渲染  
先简单演示一下 `keep-alive` 的用法  
`home.vue` 是主页面，里面有两个子页面 `one.vue` 和 `two.vue`  
`home.vue`

<template>
      <div>
        <p>home页面</p>
        <router-link to="/home/one">one</router-link>
        <router-link to="/home/two">two</router-link>
        
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </template>
    
    <script> export default { name: 'home' } </script>

在 `home.vue` 页面中路由被 `<keep-alive>` 包裹住  
`one.vue`

<template>
      <div>
        <p>one</p>
        <div>
          <span v-for="(item, key) in tabs" :class="{selected: key == currentTab}" :key="key" @click="changeTab(key)">{
       { item.name }}</span>
        </div>
        <div class="current-content" v-show="currentTab === 'btn1'">
          <p>按钮1的内容</p>
        </div>
        <div class="current-content" v-show="currentTab === 'btn2'">
          <p>按钮2的相关内容</p>
          <p>哈啊啊啊啊啊啊啊啊啊啊啊</p>
        </div>
      </div>
    </template>
    
    <script> export default { name: 'one', // 页面第一次进入，钩子函数触发顺序：created-> mounted -> activated，退出页面触发 deactivated。 // 当再次进入页面(前进或后退)时，只会触发 activated data() { return { tabs: { btn1: { name: '按钮1', value: '' }, btn2: { name: '按钮2', value: '' } }, currentTab: 'btn1' } }, methods: { changeTab(key) { this.currentTab = key } }, created() { console.log('我是第一个created') }, mounted() { console.log('我是第二个mounted') }, activated() { console.log('我是第三个activated') }, deactivated() { console.log('我是deactivated') } } </script>
    
    <style scoped> .selected { color: #2680bf;border: 1px solid #2680bf;} </style>

`two.vue`

<template>
      <div>two</div>
    </template>
    
    <script>
    export default { 
      name: 'two'
    }
    </script>

使用了 `keep-alive` 的页面效果  
![在这里插入图片描述][20200724104545712.gif]  
**测试结果分析：**

## activated和deactivated ##

*  使用了 `keep-alive` 后，在one页面中选中按钮2，切换到two页面后，再切换回来，还是选中了按钮2。页面进行了缓存。
 *  `activated` 和 `deactivated` 这两个生命周期函数只有在使用了 `keep-alive` 组件后才会执行
 *  页面第一次进入时，钩子函数的触发顺序是 `created` \-> `mounted` \-> `activated` ，退出时才会触发 `deactivated`。当再次进入页面 （前进或后退）时，只会触发 `activated`。

## include和exclude ##

`include` 和 `exclude` prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串，正则表达式或一个数组

<keep-alive include="one,two">
      <router-view></router-view>
    </keep-alive>
    
    
    <keep-alive :include="/one|two/">
      <router-view></router-view>
    </keep-alive>
    
    
    <keep-alive :include="['one','two']">
      <router-view></router-view>
    </keep-alive>

匹配首先检查组件自身的 `name` 选项，如果 `name` 选项不可用，则匹配它的局部注册名称（父组件 `components` 选项的键值）。匿名组件不能被匹配。

## max ##

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已经缓存组件中最久没有被访问的实例会被销毁掉

<keep-alive :max="10">
      <router-view></router-view>
    </keep-alive>

> `keep-alive` 不会在函数式组件中正常工作，因为它们没有缓存实例。

## keep-alive 部分使用实例 ##

### 结合router，缓存部分页面 ###

使用 `$route.meta`的 `keepAlive` 属性

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

需要在 router的路由配置中设置 router 的元信息 meta，

*  `keepAlive`：这个路由是否需要缓存
 *  `deepth`：深度，也就是页面之间的前进后退的层次关系，可选

{ 
      path: '/home',
      name: 'home',
      component: home,
      meta: { 
      	keepAlive: true, // 需要缓存，为false，则表示不需要缓存
      	deepth: 1
      },
    }

然后可以实时监听路由的变化

data() { 
      return { 
        include: []
      };
    },
    watch: { 
       $route(to, from) { 
         // 如果要to(进入)的页面是需要keepAlive缓存的，把name push进include数组中
         if (to.meta.keepAlive) { 
           !this.include.includes(to.name) && this.include.push(to.name);
         }
         // 如果 要 form(离开) 的页面是 keepAlive缓存的，
         // 再根据 deepth 来判断是前进还是后退
         // 如果是后退：
         if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) { 
           const index = this.include.indexOf(from.name);
           index !== -1 && this.include.splice(index, 1);
         }
       }
     }

其实一共需要两步：设置 meta，监听路由并判断。  
**注意：**  
你的路由中定义的 `name` 和页面中定义的 `name` 一定要全等，并区分大小写

{ 
       path: '/home',
       name: 'home', // 两者之间 name 的值要完全一样
       component: home,
       meta: {  title: pageTitle},
    }
    
    export default { 
      name: 'home' // 两者之间 name 的值要完全一样
    }

当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，

首页是A页面  
B页面跳转到A，A页面需要缓存  
C页面跳转到A，A页面不需要被缓存  
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：

[20200724104545712.gif]: /images/20230208/0d6d1edfe3cc4ad48e3e7b259c488577.png