Vue 中 KeepAlive 内置缓存使用

KeepAlive 介绍及使用场景

KeepAlive 是 vue 中的内置组件，当多个组件动态切换时可以对实例状态进行缓存，用法如下

<router-view v-slot="{ Component }">
    <keep-alive>
    	<component :is="Component" />
    </keep-alive>    
 </router-view>

router-view 中定义了一个信号槽，来渲染跳转后的组件，将keep-alive 标签封装在 组件的外面，即可实现路由跳转组件的缓存效果

KeepAlive 使用实例

下图有两个组件 页面1 和 页面2，组件页面切换 通过 点击按钮 实现

页面1 是一个计数器，加一减一，默认初始值为 0；点击按钮 页面2 ，会跳转一个 含有输入框的页面，输入框默认为空；

正常情况下，组件切换都会将组件置为初始化状态，不会缓存历史数据；如当页面1 中通过触发 增加、减少按钮将当前值置为 5 后，当切换到页面2 再切换至 页面1 ，当前值会被重置为0，原有历史数据并没有被缓存下来

而 keepAlive 可以在切换时将组件内的原有状态数据进行缓存；使用时只需要将需要缓存的组件外面包裹一层 <keepAlive></keepAlive> 标签即可，如下：

<template>
  <div class="main-test">


    <div style="margin-top:20px;margin-left: 20px;">
      <a-space>

        <a-button type="primary" style="color: blue; font-size: 14px" @click="changePageName"
          :disabled="pageName === 'A'">
          页面1
        </a-button>
        <a-button type="primary" style="color: blue; font-size: 14px" @click="changePageName"
          :disabled="pageName === 'B'">
          页面2
        </a-button>

      </a-space>
    </div>
    <keep-alive>
      <Page1 v-if="pageName === 'A'" style="margin-left: 20px; font-size: 16px; margin-top: 25px;">
      </Page1>
    </keep-alive>
    <keep-alive>
      <Page2 v-if="pageName === 'B'" style="margin-left: 20px; font-size: 16px; margin-top: 25px;">
      </Page2>
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Page1 from '@/components/test/Page1.vue';
import Page2 from '@/components/test/Page2.vue';

const pageName = ref('A')

function changePageName() {
  pageName.value = pageName.value === 'A' ? 'B' : 'A'
}

</script>

Page1 组件

<template>
    <div style="color: black;">
        当前值为{{ pageName }}
        <div style="margin-top: 20px;">
            <a-space>

                <a-button @click="addNum" type="primary">
                    增加
                </a-button>
                <a-button @click="minusNum" type="primary">
                    减少
                </a-button>
            </a-space>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'

const pageName = ref(0)

function addNum() {
    pageName.value += 1
}
function minusNum() {
    pageName.value -= 1
}

</script>
  
  
<style scoped lang="less">
.main-test {
    font-size: large;
    color: red;
    font-weight: bold;
}
</style>

Page2 组件

<template>
    <div style="color: black;">
        输入值
        <a-input v-model:value="pageName" style="margin-top: 20px; width: 300px;" placeholder="请输入需要添加的值"></a-input>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
const pageName = ref('')

</script>
  
  
<style scoped lang="less">
.main-test {
    font-size: large;
    color: red;
    font-weight: bold;
}
</style>

页面 Page1 和 页面 Page2 组件的外层都加了一层 <keep-alive></keep-alive> 标签，这样无论从页面1切换到 2 还是2 切换到1 ，两个组件内的数据状态都会得到缓存，不需要重新加载

借助 Include /Exclude 属性 条件缓存

KeepAlive 默认缓存标签内所有组件，提供 include 和 exclude 属性可以实现条件缓存，支持逗号分隔、正则表达式，或者类型数组等三种形式

具体用法如下：

<!-- 逗号隔离的字符串，匹配 name 为 a 或 b 的组件  -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!--正则表达式 ,匹配 name 不为 a 或 b 的组件-->
<KeepAlive :exclude="/a|b/">
  <component :is="view" />
</KeepAlive>

<!--数组 ，匹配 name 为 a 或 b 的组件 -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

上面属性内容匹配的都是组件 的 name option ，当组件需要被 keepAlive 条件缓存时，都需要指定 组件的 name

vue2 中 单文件 组件 指定 name 方式如下

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

vue3 中 单文件 组件 name 指定，自 3.2.34 以后版本自动将 文件的文件名指定为 name，移除了手动声明方式

max 指定 最大缓存实例 次数

<KeepAlive> 中 通过指定 max 属性来限制组件实例的最大缓存次数，当缓存实例次数达到max 值，则将最少访问 实例 销毁 为新示例创建预留空间

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

实例缓存的钩子函数

被 KeepAlive 缓存的组件实例，当组件挂载或销毁时会分别触发 activated() 和 deactivated()钩子 函数，而不是 unmounted() 和 mounted()

如果要在实例挂载或销毁时做一些操作，可以把相关逻辑写入两个钩子函数里：

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

参考

https://vuejs.org/guide/built-ins/keep-alive.html#basic-usage