KeepAlive

功能清单

• 自动收集、释放缓存
• 定时清理无效缓存
• 支持通过路由对象进行缓存

API

配置项

interface KeepAliveOptions {
  /**
   * 是否自动在路由前进时收集，后退时清理缓存，可用于模拟移动端缓存处理
   * @default true
   */
  autoCollectAndClean?: MaybeRefOrGetter<boolean>

  /**
   * 添加路由缓存前执行，返回假值将阻止添加
   */
  beforeRouteAdd?: (route: LoadableRoute) => Awaitable<void | boolean>

  /**
   * 删除路由缓存前执行，返回假值将阻止删除
   */
  beforeRouteRemove?: (route: LoadableRoute) => Awaitable<void | boolean>

  /**
   * 缓存保鲜时间，设置大于 `0` 后将开启定时器清理过期缓存
   */
  staleTime?: number
}

实例

interface KeepAlive {
  /**
   * 插件 ID
   */
  id: PluginID<KeepAlive>

  /**
   * 配置项
   */
  options: KeepAliveOptions

  /**
   * 缓存的组件名称列表
   */
  readonly values: string[]

  /**
   * 是否自动模式
   * @default true
   */
  readonly isAuto: boolean

  /**
   * 启动缓存保鲜定时器
   */
  startStaleTimer: () => void

  /**
   * 停止缓存保鲜定时器
   */
  stopStaleTimer: () => void

  /**
   * 清理过期缓存，设置 `options.staleTime > 0` 后有效
   */
  clearExpired: () => void

  /**
   * 切换自动模式
   * @param value 状态值
   */
  toggleAuto: (value?: boolean) => boolean

  /**
   * 启用自动模式
   */
  enableAuto: () => boolean

  /**
   * 禁用自动模式
   */
  disableAuto: () => boolean

  /**
   * 添加路由缓存
   * @param name 需要缓存的路由组件名称
   */
  add: {
    (name: string): void
    (route: LoadableRoute): Promise<void>
  }

  /**
   * 移除路由缓存
   * @param name 需要移除的路由组件名称
   */
  remove: {
    (name: string): void
    (route: LoadableRoute): Promise<void>
  }

  /**
   * 刷新路由缓存
   * @param name 需要刷新的路由组件名称
   */
  refresh: {
    (name: string): void
    (route: LoadableRoute): Promise<void>
  }

  /**
   * 清空缓存列表
   */
  clear: () => void

  /**
   * 设置缓存的名称列表，会覆盖旧列表
   * @param values 缓存名称列表
   */
  set: (values: string[]) => void

  /**
   * 插件安装
   */
  install: (sdk: AppSDKInternalInstance) => Uninstall
}

初始化

// sdk.ts
import { createAppSDK, createKeepAlive } from 'vue-app-sdk'

export const sdk = createAppSDK()

sdk.use(
  createKeepAlive({
    // 自动在路由前进后退时收集和清理缓存
    autoCollectAndClean: true,
    // 根据路由添加缓存前回调，返回假值将阻止添加
    beforeRouteAdd: (route) => route.meta.isKeepAlive,
  })
)

使用方式

在调用 sdk.cleanup() 时自动清理缓存列表。

基础用法

<!-- App.vue -->
<script setup>
import { useAppSDK, KEEP_ALIVE_ID } from 'vue-app-sdk'

const keepAlive = useAppSDK().getPlugin(KEEP_ALIVE_ID)!
</script>

<template>
  <div class="view-container">
    <RouterView v-slot="{ Component, route }">
      <KeepAlive :include="keepAlive.values">
        <Component
          :is="Component"
          :key="route.fullPath"
        />
      </KeepAlive>
    </RouterView>
  </div>
</template>

刷新当前页

<script setup lang="ts">
// ...

const showView = ref(true)
const route = useRoute()
function refreshCurrentPage() {
  // 刷新路由页面缓存
  const promise = keepAlive.refresh(route)
  // 隐藏视图
  showView.value = false
  // 缓存刷新结束后显示视图
  promise
    // 避免视图更新时机过早
    .then(() => nextTick())
    .then(() => {
      showView.value = true
    })
}
</script>

<template>
  <div class="view-container">
    <RouterView v-slot="{ Component, route }">
      <KeepAlive :include="keepAlive.values">
        <Component
          v-if="showView"
          :is="Component"
          :key="route.fullPath"
        />
      </KeepAlive>
    </RouterView>
  </div>
</template>

定时清理

常用于列表页，这类页面缓存需要被定期清理，以保证用户能及时获取到正确的列表数据。

// sdk.ts
// ...

sdk.use(
  createKeepAlive({
    // ...

    // 缓存保鲜时间设为 10 分钟，当页面缓存过期时将被清理
    staleTime: 10 * 60e3
  })
)