欢迎来到科站长!

JavaScript

当前位置: 主页 > 网络编程 > JavaScript

Vue3中keep-alive的使用及注意事项说明

时间:2025-07-22 15:12:03|栏目:JavaScript|点击:

Vue3中keep-alive使用及注意事项

keep-alive 是 Vue 内置的一个抽象组件,用于缓存不活动的组件实例,避免重复渲染,提高性能。

以下是它的详细用法和注意事项:

基本用法

1
2
3
4
5
6
7
8
9
10
11
<template>
  <!-- 基本用法 -->
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
 
  <!-- 缓存特定组件 -->
  <keep-alive include="CompA,CompB" exclude="CompC">
    <router-view></router-view>
  </keep-alive>
</template>

主要功能

  • 组件缓存:当组件切换时,保留组件状态(如数据、滚动位置等)
  • 避免重复渲染:减少不必要的 DOM 操作和生命周期钩子执行
  • 保留状态:保持表单输入内容、滚动位置等

核心属性

生命周期钩子

被 keep-alive 缓存的组件会触发特有的生命周期钩子:

  • onActivated:组件被激活时调用(进入缓存组件)
  • onDeactivated:组件被停用时调用(离开缓存组件)
1
2
3
4
5
6
7
8
9
10
11
12
13
import { onActivated, onDeactivated } from 'vue'
 
export default {
  setup() {
    onActivated(() => {
      console.log('组件被激活')
    })
     
    onDeactivated(() => {
      console.log('组件被停用')
    })
  }
}

与 Vue Router 结合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <keep-alive :include="cachedViews">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view>
  </keep-alive>
</template>
 
<script>
import { ref } from 'vue'
export default {
  setup() {
    const cachedViews = ref(['Home', 'User'])
    return { cachedViews }
  }
}
</script>

注意事项

组件必须有 name 选项include 和 exclude 匹配的是组件的 name 选项

动态组件切换问题

  • 使用 key 属性强制重新渲染:
1
<keep-alive><comp :key="id"></comp></keep-alive>
  • 或者使用 v-if 控制:
1
<comp v-if="show"></comp>

内存占用

  • 缓存过多组件可能导致内存占用过高
  • 使用 max 属性限制缓存数量

数据更新时机

  • 缓存的组件不会重新创建,因此 created/mounted 不会再次触发
  • 应在 activated 中处理数据刷新逻辑

滚动行为

  • 默认会保持滚动位置
  • 如需重置滚动位置,可在 activated 中处理:
1
2
3
onActivated(() => {
  window.scrollTo(0, 0)
})

与 Transition 一起使用

1
2
3
4
5
6
7
<router-view v-slot="{ Component }">
  <transition name="fade">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

最佳实践

  • 只缓存必要的组件(如表单页、列表页)
  • 对需要频繁切换但状态需要保留的组件使用
  • 避免缓存大型组件或包含大量数据的组件
  • 在路由元信息中管理缓存:
1
2
3
4
5
6
7
const routes = [
  {
    path: '/user',
    component: User,
    meta: { keepAlive: true }
  }
]

通过合理使用 keep-alive,可以显著提升应用性能,特别是在移动端或需要频繁切换视图的场景中。


上一篇:使用Node.js实现GitHub登录功能

栏    目:JavaScript

下一篇:vue部署到线上为啥会出现404的原因分析及解决

本文标题:Vue3中keep-alive的使用及注意事项说明

本文地址:https://fushidao.cc/wangluobiancheng/23751.html

广告投放 | 联系我们 | 版权申明

申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:257218569 | 邮箱:257218569@qq.com

Copyright © 2018-2025 科站长 版权所有冀ICP备14023439号