Vue之keepAlive使用案例详解

概述

Vue中的keep-alive是一个抽象组件，用于缓存动态组件或router-view之间的状态。当一个keep-alive包裹的组件在它们之间切换时，组件不会被销毁和重新创建，它只是被缓存起来，直到下次被需要时再进行渲染。

基本使用

在需要进行缓存的组件外部添加<keep-alive>标签，并在该标签中使用动态组件（或<router-view>）。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive>
      <component :is="componentName" :key="componentKey"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'HelloWorld',
      componentKey: 0
    };
  },
  methods: {
    toggle() {
      this.componentKey = this.componentKey === 0 ? 1 : 0;
    }
  }
};
</script>

上述代码中，我们添加了一个<button>用于切换缓存的组件。当toggle方法被调用时，组件的key属性被改变，从而强制重新渲染组件，达到刷新组件的目的。

手动触发缓存与销毁

除了自动缓存外，keep-alive还提供了手动控制缓存行为的方法。可以通过include和exclude属性对需要缓存和不需要缓存的组件进行控制。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive :exclude="[excludeComponentName]">
      <component :is="componentName" :key="componentKey"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'HelloWorld',
      componentKey: 0,
      excludeComponentName: 'NotCachedComponent'
    };
  },
  methods: {
    toggle() {
      this.componentKey = this.componentKey === 0 ? 1 : 0;
    }
  }
};
</script>

在上述示例中，我们使用exclude属性排除了一个名为NotCachedComponent的组件，当该组件被挂载时，它不会被缓存。

此外，keep-alive还提供了activated和deactivated生命周期钩子，用于在缓存组件被激活和销毁时进行相关操作。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <keep-alive @activated="activatedHandler" @deactivated="deactivatedHandler">
      <component :is="componentName" :key="componentKey"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'HelloWorld',
      componentKey: 0
    };
  },
  methods: {
    toggle() {
      this.componentKey = this.componentKey === 0 ? 1 : 0;
    },
    activatedHandler() {
      console.log('activated');
    },
    deactivatedHandler() {
      console.log('deactivated');
    }
  }
};
</script>

上述代码中，当缓存组件被激活时，会触发activatedHandler方法，控制台会输出activated；当缓存组件被销毁时，会触发deactivatedHandler方法，控制台会输出deactivated。

总结

keep-alive是一个很实用的组件，在需要缓存动态组件或router-view状态时可以使用它。除了基本的自动缓存外，还可以手动控制缓存行为，使用activated和deactivated生命周期钩子处理缓存组件的相关逻辑。