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

1. keep-alive

复制代码

是 Vue 内置的一个抽象组件，用于缓存不活动的组件实例，避免重复渲染，提高性能。
以下是它的详细用法和注意事项：

基本用法

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

复制代码

主要功能

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

核心属性

生命周期钩子

被

1. keep-alive

复制代码

缓存的组件会触发特有的生命周期钩子：

• 1. onActivated

  复制代码
  ：组件被激活时调用（进入缓存组件）
  
• 1. onDeactivated

  复制代码
  ：组件被停用时调用（离开缓存组件）
  

1. import { onActivated, onDeactivated } from 'vue'
   
2. 
   
3. export default {
   
4.   setup() {
   
5.     onActivated(() => {
   
6.       console.log('组件被激活')
   
7.     })
   
8.    
   
9.     onDeactivated(() => {
   
10.       console.log('组件被停用')
    
11.     })
    
12.   }
    
13. }

复制代码

与 Vue Router 结合使用

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

复制代码

注意事项

组件必须有 name 选项：

1. include

复制代码

和

1. exclude

复制代码

匹配的是组件的

1. name

复制代码

选项
动态组件切换问题：

• 使用
  1. key

  复制代码
  属性强制重新渲染：
  

1. <keep-alive><comp :key="id"></comp></keep-alive>

复制代码

• 或者使用
  1. v-if

  复制代码
  控制：
  

1. <comp v-if="show"></comp>

复制代码

内存占用：

• 缓存过多组件可能导致内存占用过高
  
• 使用
  1. max

  复制代码
  属性限制缓存数量
  

数据更新时机：

• 缓存的组件不会重新创建，因此
  1. created

  复制代码
  /
  1. mounted

  复制代码
  不会再次触发
  
• 应在
  1. activated

  复制代码
  中处理数据刷新逻辑
  

滚动行为：

• 默认会保持滚动位置
  
• 如需重置滚动位置，可在
  1. activated

  复制代码
  中处理：
  

1. onActivated(() => {
   
2.   window.scrollTo(0, 0)
   
3. })

复制代码

与 Transition 一起使用：

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

复制代码

最佳实践

• 只缓存必要的组件（如表单页、列表页）
  
• 对需要频繁切换但状态需要保留的组件使用
  
• 避免缓存大型组件或包含大量数据的组件
  
• 在路由元信息中管理缓存：
  

1. const routes = [
   
2.   {
   
3.     path: '/user',
   
4.     component: User,
   
5.     meta: { keepAlive: true }
   
6.   }
   
7. ]

复制代码

通过合理使用

1. keep-alive

复制代码

，可以显著提升应用性能，特别是在移动端或需要频繁切换视图的场景中。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339805b05.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！