【前端分享】vue3 有 keep-alive属性吗？

Vue2 和 Vue3 使用 Keep-alive 最全对比（含完整代码）

我给你用最清晰、最实用、直接可复制 的方式讲清楚：Vue2 怎么用、Vue3 怎么用、两者区别在哪。

1. 一、先记住核心结论

Vue2 ：<keep-alive> 全小写
Vue3 ：<KeepAlive> 大驼峰（兼容小写）
功能完全一致：缓存组件、保留状态、提升性能
使用场景完全一致：动态组件、路由页面

二、Vue2 中使用 keep-alive

2. 基础用法（动态组件）

复制代码

<!-- Vue2 -->
<template>
  <div>
    <keep-alive>
      <component :is="currentPage"></component>
    </keep-alive>
  </div>
</template>

3. 带条件缓存（include / exclude / max）

复制代码

<!-- 只缓存 name 为 Home、List 的组件 -->
<keep-alive include="Home,List" max="10">
  <component :is="currentPage"></component>
</keep-alive>

include：逗号分隔字符串 / 正则 / 数组
exclude：不缓存
max：最大缓存数（超出自动销毁最久未使用）

4. 路由页面缓存（最常用）

复制代码

<!-- Vue2 路由缓存 -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>

<router-view v-if="!$route.meta.keepAlive" />

路由配置：

复制代码

// router/index.js
{
  path: '/home',
  component: Home,
  meta: { keepAlive: true } // 缓存
}

5. Vue2 生命周期（缓存组件专用）

复制代码

export default {
  activated() {
    // 页面显示时触发（每次）
  },
  deactivated() {
    // 页面隐藏时触发
  }
}

三、Vue3 中使用 KeepAlive

6. 基础用法（动态组件）

复制代码

<!-- Vue3 推荐大驼峰 -->
<template>
  <KeepAlive>
    <component :is="currentPage" />
  </KeepAlive>
</template>

7. 条件缓存（和 Vue2 一样）

复制代码

<!-- 字符串形式 -->
<KeepAlive include="Home,List">
  <component :is="currentPage" />
</KeepAlive>

<!-- 数组形式（Vue3 更推荐） -->
<KeepAlive :include="['Home', 'List']" :max="10">
  <component :is="currentPage" />
</KeepAlive>

8. 路由页面缓存（Vue3 标准写法）

复制代码

<router-view v-slot="{ Component }">
  <KeepAlive>
    <component
      :is="Component"
      v-if="$route.meta.keepAlive"
    />
  </KeepAlive>
</router-view>

路由配置：

复制代码

{
  path: '/home',
  component: Home,
  meta: { keepAlive: true }
}

9. Vue3 组合式API 生命周期

复制代码

<script setup>
import { onActivated, onDeactivated } from 'vue'

// 每次显示组件
onActivated(() => {
  console.log('组件激活')
})

// 每次隐藏组件
onDeactivated(() => {
  console.log('组件失活')
})
</script>

四、Vue2 和 Vue3 使用 Keep-alive 核心区别

用法	Vue2	Vue3
组件名	`<keep-alive>`	`<KeepAlive>` （大驼峰）
语法	选项式 API	组合式 API `<script setup>`
生命周期	`activated` / `deactivated`	`onActivated` / `onDeactivated`
include 支持	字符串、正则	字符串、数组、正则（更强）
路由缓存写法	简单 v-if	标准 v-slot 写法
缓存底层	数组/对象	Map / Set（性能更高）

五、最关键的注意事项（必看！）

缓存依据是组件的 name

没写 name 会缓存失败！
- Vue2：export default { name: 'Home' }
- Vue3：<script setup> 自动以文件名作为 name
Keep-alive 不会销毁组件

只会激活/失活，所以数据会保留
只对动态组件 / 路由切换生效

普通组件写了没用
max 一定要设置

防止缓存太多导致内存溢出

六、一句话总结

Vue2 ：<keep-alive> 小写，选项式 API
Vue3 ：<KeepAlive> 大驼峰，组合式 API
功能一模一样，只是写法和生命周期略有区别
路由缓存、动态组件缓存是最常用场景