VueUse中useFetch与computedAsync组合使用的注意事项

在VueUse项目中，开发者经常会组合使用useFetch和computedAsync这两个强大的API来实现异步数据获取和计算属性。然而，这种组合使用方式存在一个需要特别注意的陷阱——不当使用会导致无限请求循环。

问题现象

当开发者在computedAsync或async watchEffect中直接await useFetch的返回结果时，浏览器会不断发送重复请求，最终可能导致浏览器崩溃。这种现象源于Vue响应式系统与异步操作的交互机制。

技术原理分析

useFetch在执行过程中会自动更新其内部状态（如data、isFetching、isFinished等响应式属性）。当这些状态变化时，Vue的响应式系统会触发computedAsync的重新计算。而computedAsync的每次重新计算又会触发新的useFetch调用，从而形成无限循环。

这种循环的本质是：

1. computedAsync执行异步操作
2. useFetch更新响应式状态
3. 状态变化触发computedAsync重新计算
4. 回到第一步，循环继续

解决方案

开发者可以采用以下两种推荐方式避免这个问题：

方案一：使用refetch选项

useFetch提供了refetch选项，可以在依赖参数变化时自动重新获取数据，而不需要手动触发。这种方式更符合声明式编程的理念。

方案二：通过watch显式控制

在watch回调中显式调用useFetch的execute方法，可以精确控制数据获取的时机，避免不必要的重复请求。

最佳实践建议

1. 避免在computed属性中进行会产生副作用的操作
2. 对于数据获取这类副作用操作，优先考虑使用watch或专门的生命周期钩子
3. 理解Vue响应式系统的工作原理，合理设计组件的数据流
4. 复杂场景下考虑将数据获取逻辑提取到单独的组合式函数中

总结

VueUse提供了强大的工具集，但强大的功能也伴随着需要理解其底层机制的责任。开发者在使用useFetch这类会产生副作用的API时，需要特别注意它们与响应式系统的交互方式。通过理解Vue的响应式原理和合理的设计模式，可以避免这类无限循环问题，构建出更健壮的应用程序。

对于VueUse的新用户，建议在使用前仔细阅读相关API文档，并通过简单的测试用例验证理解是否正确。当遇到类似问题时，可以从响应式依赖的角度进行分析，往往能找到问题的根源。