vue keep-alive 实现缓存

Vue中的keep-alive组件可以用来缓存组件，以便在组件被切换时保留其状态。下面是一个简单的示例，演示如何使用keep-alive组件来缓存组件：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

在上面的示例中，我们使用了一个`keep-alive`标签来包裹一个动态组件。当我们点击“Toggle Component”按钮时，会切换当前组件。由于我们使用了`keep-alive`标签，所以在组件被切换时，它的状态会被保留。

如果你想要在keep-alive中缓存多个组件，可以使用`<keep-alive include="ComponentA,ComponentB">`来指定要缓存的组件名称。