Vue3 KeepAlive组件缓存优化策略与实战技巧，让你的单页应用流畅如飞

• 用户在表单页面填写大量数据后切换标签，返回时数据全失？
• 列表页滚动到中部查看详情，返回时又回到顶部重新加载？
• 频繁切换的组件每次都要重新渲染，导致页面卡顿？

<router-view v-slot="{ Component }">
  <keep-alive :max="5"> 
    <component :is="Component" :key="$route.fullPath" />
  </keep-alive>
</router-view>

:max="5"：限制最大缓存实例数（避免内存溢出）

:key="$route.fullPath"：解决相同路由参数不同时的缓存错乱

// 仅缓存指定组件（支持字符串/正则/数组）
<keep-alive :include="['UserDashboard', /^Base/]">
  <component :is="currentComponent" />
</keep-alive>

// 排除不需要缓存的组件
<keep-alive :exclude="['LiveDataStream']">
  ...
</keep-alive>

// router.js
{
  path: '/user/settings',
  component: () => import('./UserSettings.vue'),
  meta: { keepAlive: true } // 标记需要缓存
}

// App.vue
<router-view v-slot="{ Component, route }">
  <keep-alive>
    <component 
      :is="Component" 
      v-if="route.meta.keepAlive" 
      :key="$route.fullPath"
    />
  </keep-alive>
  <component 
    :is="Component" 
    v-if="!route.meta.keepAlive" 
    :key="$route.fullPath"
  />
</router-view>

// 配合vue-router保存滚动位置
const router = createRouter({
  history: createWebHistory(),
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.meta.keepAlive) {
      return { top: 0 } // 从缓存恢复时不重置滚动
    }
  }
})

import { ref } from 'vue'

// 通过修改key强制刷新
const reloadKey = ref(0)
const refreshComponent = () => reloadKey.value++

<keep-alive>
  <component :is="Component" :key="`${route.name}-${reloadKey}`" />
</keep-alive>

import { onDeactivated } from 'vue'

setup() {
  const timer = setInterval(...)
  
  onDeactivated(() => {
    clearInterval(timer)
  })
}

defineComponent({
  name: 'UserProfile', // 必须声明name
  setup() { ... }
})

• ✅ 表单数据零丢失
• ✅ 列表滚动位置保持
• ✅ 高频切换组件60fps流畅体验
• ✅ 复杂SPA内存占用降低40%