Mock数据是前端开发节奏的稳定器，需统一收口管理、对接接口文档、严格区分环境、模拟真实网络特性。
Mock 数据不是“先随便写个对象凑合用”，而是前端开发节奏的稳定器。常见反模式往往源于对 Mock 本质理解偏差——它不是临时补丁，而是数据契约的轻量表达。避开这些坑，关键在结构、同步与边界意识。
把 Mock 数据硬编码在组件或页面里
比如在某个 React 组件顶部写 const mockUser = { name: '张三', id: 1 }，再直接用于渲染。问题在于：同一接口被多处调用时，数据不一致；后续改字段要到处搜；无法模拟分页、异常等真实场景。
- 统一收口到
src/mock/目录下，按模块拆分（如user.js、order.js） - 所有规则通过
Mock.mock()注册，不暴露原始数据对象给业务代码 - 入口文件（如
main.js）中仅做一次import '@/mock'，确保加载早于任何请求
Mock 规则和真实接口文档长期脱节
后端改了返回字段 user_name → username，Mock 还是旧字段，前端联调时才发现，浪费半天时间对齐。
- 优先对接 Swagger/YAPI 等接口管理平台，导出 JSON Schema 后自动生成 Mock 模板
- 若无规范文档，约定注释格式：在接口请求旁加
// @mock { "id": 1, "name": "@cname" }，用脚本提取生成规则 - 每次提测前跑一次简单校验：用
Mock.valid()对比 Mock 数据是否符合最新 TypeScript 接口定义
混淆环境、上线仍残留 Mock 逻辑
开发时一切正常，上线后发现列表空着——因为 process.env.NODE_ENV === 'development' 判断漏了，Mock 拦截仍在生效。
- 拦截逻辑只在开发环境启用：
if (process.env.NODE_ENV === 'development') { require('@/mock') } - 避免在业务代码中写
if (mockEnabled) {...}这类运行时开关，全部交由请求拦截层处理 - 构建后检查打包产物，确认
mockjs未打进生产包（可通过 Webpack Bundle Analyzer 验证）
用 Mock 模拟所有异步行为，却忽略真实网络特性
Mock 返回永远秒回，结果上线后发现列表滚动卡顿、错误提示一闪而过——因为没模拟延迟、超时、弱网重试等真实链路。
- 全局配置网络延迟：
Mock.setup({ timeout: '200-600' })，让响应时间有波动 - 对关键操作（如提交表单）单独加长延迟：
Mock.mock('/api/submit', 'post', { code: 200 }, { timeout: 1200 }) - 用函数式响应模拟超时：
Mock.mock('/api/data', () => new Promise(() => {}))，手动控制 resolve 时机
