Date对象转字符串的根本原因是JSON序列化强制转换，因JSON规范不支持Date类型，故toJSON()或stringify()会调用toISOString()输出字符串；常见于API响应、localStorage、深拷贝等场景；需在反序列化后手动或递归还原为Date实例。
Props 里的 Date 对象变成字符串，根本原因不是 Vue 或 React 自身“改了类型”，而是 JSON 序列化过程强制转换导致的——Date 对象无法被原生 JSON 标准序列化，JSON.stringify() 会自动调用其 toString() 或 toISOString() 方法，输出字符串形式。这个行为发生在数据跨层传递（如 API 响应 → store → 组件 props）、本地存储、或通过 JSON 接口传参时，属于前端通用陷阱，不依赖具体框架。
为什么 Date 一进 JSON 就变字符串？
JSON 规范只定义了六种基础类型：null、boolean、number、string、array、object，没有 Date 类型。所以任何 JSON 序列化操作（包括 JSON.stringify、fetch 发送请求、localStorage.setItem）遇到 Date 实例，都会触发隐式转换：
-
new Date('2026-04-30').toJSON()→"2026-04-30T12:00:00.000Z" -
JSON.stringify({ time: new Date() })→{"time":"2026-04-30T12:00:00.000Z"} - 后续组件接收到的
props.time已是字符串，不再是 Date 实例
哪些场景最容易中招？
这些常见操作看似无害，实则悄悄把 Date 转成了字符串：
- 从 API 接口拿到含日期字段的响应，直接赋值给 reactive/ref 数据
- 用
JSON.parse(JSON.stringify(obj))做深拷贝，其中 obj 含 Date - 把带 Date 的对象存入
localStorage，再读取还原 - 在 Vue 的
defineProps或 React 的props中接收后端返回的原始 JSON 数据
怎么保持 Date 还是 Date？
关键是在 JSON 反序列化后，主动把字符串还原为 Date 实例。推荐两种轻量方案：
-
手动映射还原：API 响应后，对已知日期字段做显式转换
const res = await api.getData();<br>const data = { ...res, createdAt: new Date(res.createdAt) }; -
递归解析工具函数（适合嵌套结构）：
function parseDates(obj) {<br> if (obj === null || typeof obj !== 'object') return obj;<br> if (obj instanceof Date) return obj;<br> if (typeof obj === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(obj)) return new Date(obj);<br> if (Array.isArray(obj)) return obj.map(parseDates);<br> return Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, parseDates(v)]));<br>}
更彻底的解法：前后端约定 + 类型守卫
避免每次手动处理，可建立规范：
- 后端统一用 ISO 字符串格式（如
"2026-04-30T12:00:00Z"）返回日期，并在接口文档中标注字段类型 - 前端封装请求层，在
axios.interceptors.response或自定义 hook 中统一执行日期字段还原 - 配合 TypeScript 接口定义，用
dateString类型区分原始字符串与运行时 Date 实例，减少误用
