异步组件配合 mock 数据开发的核心是模拟真实接口的延迟、错误与分段加载，通过 defineAsyncComponent 统一控制加载源，共用类型定义生成 mock 数据，并封装 useApi 代理层实现平滑切换。
异步组件配合 mock 数据开发，核心是让前端在接口未就绪时，也能完整跑通路由加载、状态管理、UI 渲染全流程。关键不在于“能不能 mock”，而在于 mock 的时机、粒度和一致性是否贴合真实异步行为。
用动态 import + defineAsyncComponent 封装真实加载逻辑
不要把 mock 逻辑写死在组件内部，而是通过工厂函数统一控制加载源：
- 组件本身只负责渲染，不关心数据来源；
- 在路由配置或组件注册处，用 defineAsyncComponent 包裹动态 import，并在加载前注入 mock 判断；
- 例如：当环境为 dev 且存在 MOCK_ENABLED=true 时，返回 mock 组件（含模拟的 setup 和响应式数据），否则走真实 import。
mock 数据要模拟真实接口的延迟、错误与分段加载
真实后端接口有网络延迟、500 错误、分页加载、loading 状态变化——mock 必须复现这些细节，否则联调时会暴露大量边界问题：
- 用 setTimeout 模拟 300–800ms 延迟，避免“秒出数据”掩盖 loading 状态 bug；
- 对特定请求路径（如 /api/user/123）随机返回 404 或 500，验证错误边界处理；
- 对列表接口（如 /api/posts）支持 query 参数（page=2&size=10），返回对应分页数据，确保前端分页逻辑可测。
共用同一套类型定义与 mock schema
前后端约定好 OpenAPI/Swagger 或 TypeScript 接口定义后，前端可直接生成 mock 数据结构，避免“手写 mock 导致字段名错位”：
- 用 @openapitools/openapi-generator-cli 或 swagger-typescript-api 从 spec 生成 TS 类型 + mock 工厂函数；
- mock 函数接收类型参数（如 User），自动填充合理默认值（id → number，name → ChineseName，avatar → avatar url）；
- 组件中 import 类型和 mock 工厂，setup 里直接调用 mockUser()，类型安全且免维护。
在真实 API 就绪后平滑切换，不改业务代码
切换成本高是 mock 被弃用的主因。应设计“运行时代理层”，而非编译期条件编译：
- 封装统一的 useApi() 组合式函数，内部根据环境和 feature flag 决定调用 mock service 还是 axios 实例；
- mock service 和真实 service 实现同一接口（相同入参、相同返回 Promise
）； - 上线前只需修改一个配置项（如 VUE_APP_API_MODE=real），所有组件自动对接真实后端，无需逐个替换 fetch 调用。
