vue实现swr
实现 SWR（Stale-While-Revalidate）模式
SWR 是一种缓存策略，允许应用在后台重新验证数据的同时立即返回已缓存（可能过时）的数据。Vue 中可以通过组合式 API 或第三方库实现。
使用 @vueuse/core 的 useFetch 实现
安装依赖：
npm install @vueuse/core示例代码：
<script setup>
import { useFetch } from '@vueuse/core'
const { data, error } = useFetch('https://api.example.com/data')
.get()
.json()
</script>
<template>
<div v-if="error">Error: {{ error.message }}</div>
<div v-else>{{ data }}</div>
</template>自定义实现 SWR 逻辑
通过组合式 API 手动实现核心逻辑：
<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
const isLoading = ref(false)
async function fetchData() {
isLoading.value = true
try {
const response = await fetch('https://api.example.com/data')
data.value = await response.json()
} catch (err) {
error.value = err
} finally {
isLoading.value = false
}
}
// 初始加载
fetchData()
// 定期重新验证（每30秒）
const interval = setInterval(fetchData, 30000)
onMounted(() => clearInterval(interval))
</script>使用 swrv 专用库
专为 Vue 设计的 SWR 实现库：
安装：
npm install swrv示例：
<script setup>
import useSWRV from 'swrv'
const { data, error } = useSWRV('/api/data', fetcher)
function fetcher(url) {
return fetch(url).then(r => r.json())
}
</script>关键优化点
- 设置适当的缓存时间（TTL）
- 实现错误重试机制
- 添加请求去重功能
- 支持依赖请求（当参数变化时自动重新请求）
这些方法可以根据项目需求选择，轻量级场景推荐自定义实现，复杂场景建议使用 swrv 等专业库。
