2026-03-13

Codes►前端

Keep-Alive

06 Vue项目配套

Keep-Alive 在 Vue 中怎么用？

在 Vue 中，Keep-Alive 是一个非常实用的内置组件，用于缓存动态组件，避免在组件切换时重新渲染，从而提升性能和用户体验。以下是 Keep-Alive 在 Vue 中的详细使用方法：

基本用法

Keep-Alive 可以包裹在动态组件外部，来缓存不活动的组件实例，而不是销毁它们。这可以用于保留组件的状态或避免重新渲染。

示例

假设你有一个应用，其中包含几个不同的组件，这些组件通过路由或条件渲染进行切换。你可以使用 Keep-Alive 来缓存这些组件，避免每次切换时都重新渲染。

<template>
  <div>
    <button @click="activeComp = 'CompA'">CompA</button>
    <button @click="activeComp = 'CompB'">CompB</button>
    <button @click="activeComp = 'CompC'">CompC</button>
    <keep-alive>
      <component :is="activeComp"></component>
    </keep-alive>
  </div>
</template>
<script>
import CompA from './components/CompA.vue';
import CompB from './components/CompB.vue';
import CompC from './components/CompC.vue';
export default {
  components: {
    CompA,
    CompB,
    CompC
  },
  data() {
    return {
      activeComp: 'CompA'
    };
  }
};
</script>

在这个示例中，activeComp 数据属性用于控制当前显示的组件。Keep-Alive 包裹在 <component :is="activeComp"></component> 外部，确保切换组件时，未显示的组件实例会被缓存，而不是销毁。

属性

Keep-Alive 提供了一些属性，可以用于更精细地控制缓存行为：

include：字符串或正则表达式。只有匹配的组件会被缓存。
exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。
max：数字。最多可以缓存多少组件实例。

示例

<template>
  <div>
    <button @click="activeComp = 'CompA'">CompA</button>
    <button @click="activeComp = 'CompB'">CompB</button>
    <button @click="activeComp = 'CompC'">CompC</button>
    <keep-alive :include="['CompA', 'CompB']" :max="10">
      <component :is="activeComp"></component>
    </keep-alive>
  </div>
</template>
<script>
import CompA from './components/CompA.vue';
import CompB from './components/CompB.vue';
import CompC from './components/CompC.vue';
export default {
  components: {
    CompA,
    CompB,
    CompC
  },
  data() {
    return {
      activeComp: 'CompA'
    };
  }
};
</script>

在这个示例中，只有 CompA 和 CompB 会被缓存，CompC 不会被缓存。同时，最多缓存 10 个组件实例。

生命周期钩子

使用 Keep-Alive 时，被包裹的组件会多出两个生命周期钩子：activated 和 deactivated。这两个钩子分别在组件被激活和停用时触发。

示例

<template>
  <div>
    <button @click="activeComp = 'CompA'">CompA</button>
    <button @click="activeComp = 'CompB'">CompB</button>
    <button @click="activeComp = 'CompC'">CompC</button>
    <keep-alive>
      <component :is="activeComp"></component>
    </keep-alive>
  </div>
</template>
<script>
import CompA from './components/CompA.vue';
import CompB from './components/CompB.vue';
import CompC from './components/CompC.vue';
export default {
  components: {
    CompA,
    CompB,
    CompC
  },
  data() {
    return {
      activeComp: 'CompA'
    };
  }
};
</script>

// CompA.vue
<template>
  <div>CompA</div>
</template>
<script>
export default {
  activated() {
    console.log('CompA activated');
  },
  deactivated() {
    console.log('CompA deactivated');
  }
};
</script>

在这个示例中，CompA 组件在被激活和停用时会分别触发 activated 和 deactivated 钩子，可以在这两个钩子中执行一些特定的逻辑，例如重新获取数据、清理定时器等。

常见问题

如何在 Vue Router 中使用 Keep-Alive？
在 Vue Router 中，你可以使用 <router-view> 的 include 和 exclude 属性来控制哪些路由组件需要被缓存。

<template>
  <div>
    <keep-alive :include="cachedViews">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  computed: {
    cachedViews() {
      return this.$store.state.cachedViews;
    }
  }
};
</script>

在这个示例中，cachedViews 是一个计算属性，从 Vuex 状态管理中获取需要缓存的路由组件名称列表。

如何动态控制 Keep-Alive 的缓存？
你可以通过动态绑定 include 和 exclude 属性来控制哪些组件需要被缓存。

<template>
  <div>
    <keep-alive :include="includeComponents" :exclude="excludeComponents">
      <component :is="activeComp"></component>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeComp: 'CompA',
      includeComponents: ['CompA', 'CompB'],
      excludeComponents: ['CompC']
    };
  }
};
</script>

在这个示例中，includeComponents 和 excludeComponents 是数据属性，可以动态控制哪些组件需要被缓存。

总结

Keep-Alive 是 Vue 中一个非常有用的内置组件，用于缓存动态组件，避免在组件切换时重新渲染，从而提升性能和用户体验。通过合理使用 Keep-Alive 的属性和生命周期钩子，你可以实现更精细的缓存控制，优化应用的性能。