Vue中 ＜keep-alive＞ 组件的使用详解

keep-alive 是一个内置的高阶组件，用于缓存动态组件。它能够保持不活动组件的状态，避免重新渲染这些组件，从而显著提升应用性能，尤其是在组件之间频繁切换的场景下。接下来将详细介绍 keep-alive 的使用方法和最佳实践。

基本用法

首先，我们来看一下 keep-alive 的基本用法。它需要包裹动态组件，以便对这些组件进行缓存。

<template>
  <div>
    <button @click="currentView = 'ComponentA'">显示组件A</button>
    <button @click="currentView = 'ComponentB'">显示组件B</button>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: 'ComponentA',
    };
  },
  components: {
    ComponentA: () => import('./ComponentA.vue'),
    ComponentB: () => import('./ComponentB.vue'),
  },
};
</script>

在上面的示例中，keep-alive 包裹了动态组件 <component :is="currentView">，从而缓存 ComponentA 和 ComponentB。

include 和 exclude 属性

keep-alive 组件支持 include 和 exclude 属性，用于有选择地缓存组件。include 属性指定哪些组件需要被缓存，而 exclude 属性指定哪些组件不需要被缓存。它们可以接受字符串、正则表达式或数组。

<keep-alive include="ComponentA">
  <component :is="currentView"></component>
</keep-alive>

<keep-alive :include="['ComponentA', 'ComponentB']">
  <component :is="currentView"></component>
</keep-alive>

<keep-alive :exclude="['ComponentC']">
  <component :is="currentView"></component>
</keep-alive>

使用 key 控制缓存

通过为动态组件添加 key 属性，可以更精细地控制缓存行为。每当 key 变化时，缓存的组件实例将被重新渲染。

<keep-alive>
  <component :is="currentView" :key="currentView"></component>
</keep-alive>

生命周期钩子

被 keep-alive 缓存的组件会触发特定的生命周期钩子：activated 和 deactivated。这些钩子函数可以用来执行在组件激活和停用时的逻辑处理。

<template>
  <div>
    <p>我是组件A</p>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
  activated() {
    console.log('ComponentA activated');
  },
  deactivated() {
    console.log('ComponentA deactivated');
  },
};
</script>

综合示例

以下是一个综合示例，展示了如何使用 keep-alive缓存组件，并利用 activated 和 deactivated 生命周期钩子来管理组件状态：

<template>
  <div>
    <button @click="currentView = 'ComponentA'">显示组件A</button>
    <button @click="currentView = 'ComponentB'">显示组件B</button>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: 'ComponentA',
    };
  },
  components: {
    ComponentA: {
      template: '<div>我是组件A</div>',
      activated() {
        console.log('ComponentA activated');
      },
      deactivated() {
        console.log('ComponentA deactivated');
      },
    },
    ComponentB: {
      template: '<div>我是组件B</div>',
      activated() {
        console.log('ComponentB activated');
      },
      deactivated() {
        console.log('ComponentB deactivated');
      },
    },
  },
};
</script>

结论

通过使用 keep-alive 组件，Vue 开发者可以有效地缓存动态组件，从而提升应用的性能和用户体验。这在需要频繁切换组件的场景中尤为重要。希望本文对你理解和使用 keep-alive 组件有所帮助，能为你的 Vue 项目带来性能上的提升。

原文链接

Vue中 ＜keep-alive＞ 组件的使用详解