vue实现swr
vue实现SWR（Stale-While-Revalidate）模式
SWR是一种数据获取策略，优先返回缓存中的旧数据（stale），同时在后台重新验证（revalidate）并更新数据。以下是Vue中实现SWR的几种方法：
使用Composition API实现基础SWR
import { ref, onMounted } from 'vue'
export function useSWR(key, fetcher) {
const data = ref(null)
const error = ref(null)
const isValidating = ref(false)
async function revalidate() {
isValidating.value = true
try {
const newData = await fetcher(key)
data.value = newData
} catch (err) {
error.value = err
} finally {
isValidating.value = false
}
}
onMounted(revalidate)
return {
data,
error,
isValidating,
revalidate
}
}添加缓存层优化
const cache = new Map()
function useSWR(key, fetcher) {
// ...之前的代码
onMounted(() => {
if (cache.has(key)) {
data.value = cache.get(key) // 先返回缓存
}
revalidate() // 后台更新
})
async function revalidate() {
// ...之前的代码
cache.set(key, newData) // 更新缓存
}
}使用Vue插件形式封装
const SWRPlugin = {
install(app) {
app.config.globalProperties.$swr = (key, fetcher) => {
// 实现逻辑同上
}
}
}集成现有库
现有Vue SWR实现库可供直接使用：
vue-query：提供类似React Query的功能@vueuse/core：包含useFetch等组合式函数swrv：专为Vue设计的SWR库
示例使用swrv库
import useSWRV from 'swrv'
export default {
setup() {
const { data, error } = useSWRV('/api/user', fetcher)
return { data, error }
}
}关键优化点
- 请求去重：避免同时发起多个相同请求
- 缓存策略：设置合理的缓存过期时间
- 错误重试：实现指数退避重试机制
- 依赖收集：基于响应式数据自动重新请求
性能考虑
- 对于高频更新数据，适当增加revalidate间隔
- 对关键数据可设置
dedupingInterval避免重复请求 - 对大型数据集考虑分页或懒加载
实现SWR模式时，应根据具体应用场景调整缓存策略和更新频率，平衡实时性和性能。
