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

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

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

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

基本用法

<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：组件被停用时调用（离开缓存组件）

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
      console.log('组件被激活')
    })
    
    onDeactivated(() => {
      console.log('组件被停用')
    })
  }
}

与 Vue Router 结合使用

<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 属性强制重新渲染：

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

或者使用 v-if 控制：

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

内存占用：

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

数据更新时机：

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

滚动行为：

默认会保持滚动位置
如需重置滚动位置，可在 activated 中处理：

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

与 Transition 一起使用：

<router-view v-slot="{ Component }">
  <transition name="fade">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

最佳实践

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

const routes = [
  {
    path: '/user',
    component: User,
    meta: { keepAlive: true }
  }
]

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

总结

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

来源链接：https://www.jb51.net/javascript/339805b05.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

Vue.js 前端开发编程开发
# Vue3 # keep-alive

目录