Nuxt 里 useAsyncData 的 key：缓存、去重与那个共享数据的 Bug
来源：dev.to — 2026-09-13
📋 概述
同一页面上用两个不同 ID 取到的两张商品卡都显示了 1 号商品，控制台不报错、网络面板也没有失败请求。原因是 useAsyncData 的缓存 key 并不是从你取的数据推导出来的，而是从你在源码里的调用位置推导出来的：在同一条包装 composable 里调用两次而不显式传 key，Nuxt 就认为它们是同一个请求，两次调用共用一个 data ref。文章按阶段讲清 key 的生成规则、dedupe 中 cancel 与 defer 的区别，以及服务端渲染与客户端 hydration 如何靠 key 对应。
🔑 核心要点
- 缓存 key 来自调用位置而不是数据，因此包装 composable 里的两次调用会共用同一个条目。
- 两次调用会被认为「是同一个 fetch」，网络层可能完全正常。
- dedupe 的 cancel 与 defer 是两种不同行为，需要按具体 UI 选择。
- key 同时是服务端渲染结果与客户端 hydration 载荷之间的对应关系。
- 结论是每个动态请求都应显式传一个正确的 key，把它变成条件反射。
💡 金句
Bug 不在网络层：Nuxt 把两次调用交给了同一个缓存条目，第二次的结果覆盖或跳过了第一次的。
👍 0
👎 0
← 返回 dev.to 首页