vue依赖注入核心是让真实依赖可替换、可控制，不改业务代码即可用mock数据测试：组合函数接收依赖为参数、工厂函数统一创建服务实例、provide/inject提供稳定对象、组件通过props接收依赖。
Vue 依赖注入在测试中不是为了“加一层”，而是为了让真实依赖可替换、可控制。核心目标是：不改业务代码，就能让组件用 mock 数据跑起来。
把依赖当参数传入，而不是硬编码调用
比如一个获取用户信息的组合式函数：
- 错误写法：
fetch('/api/user')写死在函数内部 —— Jest 拦不住，测试时只能发真实请求 - 正确写法：
useUser(requestFn = fetch)，内部调用requestFn('/api/user') - 测试时直接传入
mockFetch，它可返回任意 JSON、延迟、404 或抛错，UI 层表现和真实网络完全一致
用工厂函数统一创建服务实例
避免满项目 new ApiClient() —— 那不是解耦，是批量替换预备态。
- 只在一个地方定义工厂：
export const createApiClient = (options) => new ApiClient(options) - 顶层（如
main.ts）一次性构造：const services = { api: createApiClient({ baseUrl }) } - 所有组件/组合函数都从
services.api取实例；测试时只需让工厂返回 mock 实例，其余代码零改动
provide/inject 的安全用法
provide 不是 DI 容器，滥用会埋雷。
- ❌ 错误：
provide('api', new ApiClient())—— 实例提前创建、无法复用、类型难约束 - ✅ 正确：
provide('services', services)—— 提供已构造好的稳定对象，子组件inject('services')拿到即可 - 若需按需初始化（如带 token），工厂应返回函数：
createApiClient = () => () => new ApiClient()，调用方自行控制时机
组件级依赖注入的测试实践
对于接收依赖作为 prop 的组件，测试最轻量：
- 组件声明
props: { fetchData: Function }，内部调用this.fetchData() - 测试时直接传入 mock 函数：
props: { fetchData: () => Promise.resolve([{ id: 1, name: 'test' }]) } - 无需 mock 模块、不用工厂、不碰 provide —— 简单清晰，适合多数业务组件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
