<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <my-component v-if="showComponent" />
    </keep-alive>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      showComponent: false,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    },
  },
};
</script>

<keep-alive :include="cachedComponents">
  <!-- 缓存的组件 -->
</keep-alive>

export default {
  // ...
  activated() {
    // 在组件激活时执行更新操作
    // 可以在这里重置组件的状态
  },
  deactivated() {
    // 在组件停用时执行重置操作
  },
};