Vue — keep-alive详解

当使用 <keep-alive> 标签包裹组件时，Vue.js 会将这个组件缓存起来，而不是每次重新创建和销毁。这意味着组件的状态、数据和生命周期钩子函数都得以保留，以便在下次被激活时能够立即恢复到之前的状态。

<keep-alive> 的主要作用是优化组件的性能和用户体验，尤其适用于频繁切换或重复访问的组件。

<keep-alive> 的关键特性：

1. 缓存组件：<keep-alive> 会缓存被包裹的组件实例，以避免多次创建和销毁。这样可以节省性能开销，并提高页面响应速度。

2. 生命周期钩子函数：被缓存的组件在切换时，生命周期钩子函数不会再触发 created 和 destroyed，而是触发 activated 和 deactivated 钩子函数。这使得可以在组件激活时执行特定操作，而无需重新初始化整个组件。

3. 缓存策略：<keep-alive> 可以设置不同的缓存策略，以控制哪些组件需要缓存以及如何进行缓存。常见的缓存策略包括 include、exclude 和 max。

   • include：指定需要缓存的组件名称或正则表达式。
   • exclude：指定不需要缓存的组件名称或正则表达式。
   • max：指定最多同时缓存的组件数量。

4. 动态缓存：可以通过使用动态组件和 <keep-alive> 的 include 属性来实现根据条件动态缓存组件。

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>

    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </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 created');
      },
      destroyed() {
        console.log('Component A destroyed');
      },
      activated() {
        console.log('Component A activated');
      },
      deactivated() {
        console.log('Component A deactivated');
      }
    },
    ComponentB: {
      template: '<div>Component B</div>',
      created() {
        console.log('Component B created');
      },
      destroyed() {
        console.log('Component B destroyed');
      },
      activated() {
        console.log('Component B activated');
      },
      deactivated() {
        console.log('Component B deactivated');
      }
    }
  }
};
</script>