当前位置：首页 > news >正文

＜KeepAlive＞和＜keep-alive＞有什么区别

news 来源：原创 2025/5/24 0:53:00

在不同的前端技术框架里，<KeepAlive> 和 <keep-alive> 有着不同的含义与使用场景，下面分别从 Vue 2 和 Vue 3 来为你详细介绍它们的区别。

Vue 2 中的 <keep-alive>

在 Vue 2 里，<keep-alive> 属于内置组件，主要用于缓存动态组件，避免在组件切换时重复创建和销毁组件实例，从而提升性能。其使用方式如下：

<template>
  <div>
    <!-- 使用 keep-alive 组件缓存动态组件 -->
    <keep-alive>
      <!-- 根据 currentComponent 动态渲染组件 -->
      <component :is="currentComponent"></component>
    </keep-alive>
    <!-- 切换组件的按钮 -->
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      // 当前显示的组件
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      // 切换组件
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在上述代码中，<keep-alive> 组件把 <component> 包裹起来，这样在切换 currentComponent 时，ComponentA 和 ComponentB 这两个组件的实例就会被缓存，不会被销毁。

Vue 3 中的 <KeepAlive>

在 Vue 3 里，<KeepAlive> 依旧是内置组件，功能和 Vue 2 的 <keep-alive> 类似，不过它的使用方式和 API 有了一些变化。Vue 3 采用了 PascalCase（大驼峰命名），所以标签名是 <KeepAlive>。示例如下：

<template>
  <div>
    <!-- 使用 KeepAlive 组件缓存动态组件 -->
    <KeepAlive>
      <!-- 根据 currentComponent 动态渲染组件 -->
      <component :is="currentComponent"></component>
    </KeepAlive>
    <!-- 切换组件的按钮 -->
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

// 定义当前显示的组件
const currentComponent = ref('ComponentA');

const toggleComponent = () => {
  // 切换组件
  currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
};
</script>

此代码中，<KeepAlive> 组件同样把 <component> 包裹起来，在切换 currentComponent 时，ComponentA 和 ComponentB 组件的实例会被缓存。

区别总结

大小写规范：Vue 2 用的是 kebab-case（短横线命名）的 <keep-alive>，而 Vue 3 采用 PascalCase（大驼峰命名）的 <KeepAlive>，这是 Vue 3 在模板语法上的统一规范。
使用场景：功能上两者基本一致，都是用于缓存组件实例，避免重复创建和销毁。但在 Vue 3 里，<KeepAlive> 搭配了一些新的 API 和特性，例如 include、exclude 和 max 等属性，让缓存管理更加灵活。