vue3 keepalive动态缓存

Vue3 的 `keep-alive` 组件提供了动态缓存的功能，可以根据组件的属性值动态地缓存组件。

在 Vue2 中，我们可以使用 `include` 和 `exclude` 属性来控制缓存哪些组件和不缓存哪些组件。但是这种方式无法根据组件的属性值进行动态缓存。

在 Vue3 中，我们可以使用 `v-bind` 指令来动态绑定 `keep-alive` 组件的 `include` 和 `exclude` 属性，实现动态缓存的功能。例如：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive :include="includeList" :exclude="excludeList">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      includeList: [],
      excludeList: [],
      show: false,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
      if (this.show) {
        this.includeList.push("ComponentA");
        this.excludeList = this.excludeList.filter((name) => name !== "ComponentA");
      } else {
        this.excludeList.push("ComponentA");
        this.includeList = this.includeList.filter((name) => name !== "ComponentA");
      }
    },
  },
};
</script>

在上面的代码中，我们使用 `includeList` 和 `excludeList` 数组来动态控制缓存哪些组件和不缓存哪些组件。在 `toggle` 方法中，根据 `show` 属性的值来决定是否缓存 `ComponentA` 组件。如果 `show` 为 `true`，则将 `ComponentA` 添加到 `includeList` 中，并从 `excludeList` 中删除；如果 `show` 为 `false`，则将 `ComponentA` 添加到 `excludeList` 中，并从 `includeList` 中删除。

这样就可以根据组件的属性值动态地缓存组件了。