Vue Hooks Plus 项目中 useRequest 的安全风险与正确使用指南

安全风险通告

Vue Hooks Plus 项目的 2.3.0 和 2.2.4 版本被发现存在安全隐患，核心问题出在依赖自动收集机制的实现上。开发团队已紧急建议用户回退至 2.2.3 版本，并承诺后续会将依赖自动刷新功能移至 beta 版本进行更充分的测试。

问题根源分析

问题的技术本质在于：项目将依赖自动收集从 watchEffect 改为 watch 监听 service 函数时，service 函数本身被作为依赖项，导致 Vue 会执行这个 service 函数，从而意外触发额外的请求。这种设计缺陷可能导致应用在不知情的情况下发送多余的 API 请求，不仅影响性能，还可能造成数据不一致或安全风险。

版本回退建议

对于正在使用受影响版本(2.3.0 或 2.2.4)的项目，建议立即采取以下措施：

1. 将 package.json 中的依赖版本锁定为 2.2.3
2. 删除 node_modules 目录
3. 重新执行 npm install/yarn install
4. 验证应用行为是否恢复正常

useRequest 的正确使用模式

即使在使用安全版本时，开发者也需要正确理解 useRequest 的工作机制。以下是几个关键使用要点：

自动请求模式

// 正确的自动请求写法
const { data } = useRequest(apiFunction, {
  defaultParams: [param1, param2] // 初始参数
})

手动触发模式

// 正确的手动触发写法
const { run } = useRequest(apiFunction, {
  manual: true
})

// 触发请求时传递参数
run(param1, param2)

常见误区解析

1. 手动模式的参数传递：不应该在 useRequest 的 service 参数中使用箭头函数包装，而应该直接传入 API 函数，参数通过 run 方法传递。

2. 依赖收集机制：Vue 的响应式系统会自动收集依赖，错误的使用方式可能导致意外的重新执行。

3. 请求触发时机：确保理解 manual 参数的真实含义，它控制的是初始是否自动发送请求，而非是否允许手动触发。

最佳实践建议

1. 对于关键业务逻辑，建议优先使用手动触发模式，明确控制请求时机
2. 复杂参数建议使用对象形式而非多个参数，提高代码可读性
3. 在组件卸载时考虑使用 cancel 方法中止进行中的请求
4. 对于重要操作，建议添加防重处理逻辑

未来版本改进方向

开发团队表示后续将：

• 将自动刷新相关功能移至 beta 通道
• 增强类型提示和参数校验
• 提供更明确的文档说明和示例
• 改进错误处理机制

通过这次事件，开发者应该更加重视 hooks 库的版本管理和正确使用方式，特别是在生产环境中要谨慎评估新特性的稳定性。