vue keepalive

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

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA: {
      template: '<div>Component A</div>',
      created() {
        console.log('Component A is created');
      },
      activated() {
        console.log('Component A is activated');
      },
      deactivated() {
        console.log('Component A is deactivated');
      }
    },
    ComponentB: {
      template: '<div>Component B</div>',
      created() {
        console.log('Component B is created');
      },
      activated() {
        console.log('Component B is activated');
      },
      deactivated() {
        console.log('Component B is deactivated');
      }
    }
  }
};
</script>

解释说明

1. <keep-alive> 标签：用于缓存组件，避免重复创建和销毁。当组件在 <keep-alive> 内部被切换时，它不会被销毁，而是会被缓存起来。当再次访问该组件时，直接从缓存中读取，从而提升性能。

2. <component :is="currentComponent">：动态组件，根据 currentComponent 的值来决定渲染哪个组件。

3. toggleComponent 方法：点击按钮时切换 currentComponent 的值，从而切换显示的组件。

4. 生命周期钩子：

   • created：组件创建时调用。
   • activated：组件被激活（进入缓存）时调用。
   • deactivated：组件被停用（离开缓存）时调用。

通过这种方式，你可以有效地管理组件的状态，并且在需要的时候重用这些状态。