stack-keep-alive怎么使用

`<keep-alive>` 是 Vue 内置的一个组件，用于缓存动态组件。当组件在 `<keep-alive>` 内被切换时，它的状态将会被保留，而不是重新渲染。

`<keep-alive>` 的使用非常简单，只需要将需要缓存的组件包裹在 `<keep-alive>` 标签内即可。例如：

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

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggle() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA: {
      template: '<div>Component A</div>',
    },
    ComponentB: {
      template: '<div>Component B</div>',
    },
  },
};
</script>

在上面的示例中，我们使用了 `<keep-alive>` 标签来缓存动态组件。通过点击按钮，我们可以在 `ComponentA` 和 `ComponentB` 之间进行切换，并且切换后组件的状态将会被保留。

需要注意的是，`<keep-alive>` 只能对动态组件进行缓存，不能对静态组件进行缓存。如果需要缓存静态组件，可以考虑使用其他的缓存方案，比如使用 `v-show` 和 `v-if` 来手动控制组件的显示和隐藏。