Nuxt Content 中动态内容重载的最佳实践

在 Nuxt.js 项目中，特别是使用 Nuxt Content 模块时，开发者经常会遇到需要根据动态参数重新获取内容的需求。本文将深入探讨如何在组件已挂载的情况下优雅地实现内容重载。

核心问题分析

当我们需要根据传入的 props 参数（如内容 ID）动态获取内容时，直接使用 useAsyncData 可能会遇到缓存和重复请求的问题。常见场景包括：

• 弹出层组件根据不同的 ID 显示不同内容
• 分页或标签切换时内容更新
• 多语言切换时的内容重载

解决方案对比

1. 使用 watch 配合 refresh

最直接的方式是监听 props 变化并手动触发 refresh：

watch(
  () => props.contentId,
  () => {
    refresh()
  }
)

const { data, refresh } = useAsyncData(
  `content-key-${props.contentId}`,
  () => fetchContent(props.contentId)
)

2. 利用 useAsyncData 的 watch 选项

更优雅的方式是使用内置的 watch 选项：

const { data } = useAsyncData(
  `content-key-${props.contentId}`,
  () => fetchContent(props.contentId),
  {
    watch: () => props.contentId
  }
)

注意这里需要使用函数形式 () => props.contentId 而不是直接传递 prop，这是 Vue 响应式系统的要求。

缓存策略优化

Nuxt 的内容获取会自动缓存，合理设置缓存键非常重要：

// 包含语言环境和ID的复合键
const cacheKey = `content-${locale.value}-${props.contentId}`

性能考量

1. 避免嵌套使用：不应在函数内部使用 useAsyncData，这会导致重复注册
2. 直接使用查询：对于简单场景，可以直接调用查询方法而不包装
3. 防抖处理：对于频繁变化的 prop，考虑添加防抖逻辑

最佳实践总结

1. 优先使用 useAsyncData 的 watch 选项实现自动重载
2. 为每个动态参数组合设置唯一的缓存键
3. 对于复杂逻辑，可以结合手动 refresh 方法
4. 注意响应式数据的正确引用方式

通过以上方法，开发者可以在 Nuxt Content 项目中高效地实现动态内容加载，同时保持良好的性能和代码可维护性。