vue 3 的 reactive 不代理内置对象（如 date、regexp、map 等），因其内部槽位和方法无法被 proxy 安全拦截，强行代理会导致依赖丢失或报错；正确做法是用 ref 封装或提取可响应字段。
Vue.js 响应式系统**不代理内置对象**，包括 Date、RegExp、Map、Set、ArrayBuffer 等。这不是遗漏，而是明确的设计取舍——这些对象的内部状态无法通过 Proxy 的 get/set 安全、完整地拦截和追踪。
为什么内置对象不被 reactive 代理？
Vue 3 的 reactive() 内部使用 Proxy，但它只对纯普通对象（plain object）和数组递归处理。而内置对象（如 new Date()）具有不可枚举的内部槽位（internal slots）、私有方法（如 Date.prototype.getTime）以及非标准的属性访问逻辑。Proxy 无法劫持这些行为，强行代理会导致：
- 读写操作不触发依赖收集或更新通知
- 调用方法（如
date.setDate(10)）完全绕过响应式系统 - 某些内置对象（如
RegExp）甚至无法被 Proxy 正确包装，直接报错
Vue 2 和 Vue 3 的一致态度
这一限制在 Vue 2 中同样存在：Object.defineProperty 无法监听内置对象的方法调用或内部状态变更；Vue 3 虽改用 Proxy，但并未“修复”该问题，而是更坦率地跳过它们，避免虚假的响应式承诺。
- Vue 2：对
Date等对象不做任何劫持，视为普通值 - Vue 3：
reactive(new Date())返回原对象（不包装），控制台可能警告“value cannot be made reactive”
正确使用内置对象的响应式方案
若需让日期、正则等具备响应能力，必须将其**封装在可代理的结构中**：
-
用
ref包裹：适合单值场景，例如const now = ref(new Date())；修改时赋新实例（now.value = new Date()）可触发更新 -
用普通字段承载关键值：例如不用
dateObj，而存dateString或timestamp，再通过计算属性转为Date实例 -
配合
shallowRef或toRaw：当需保留原生对象能力又避免意外代理时，显式管理其生命周期
深拷贝与内置对象的注意事项
对含 Date、RegExp 的响应式数据做深拷贝时，不能直接 structuredClone(reactiveObj)（会因 Proxy 报错）。正确流程是：
- 先用
toRaw()解包得到原始 JS 对象 - 再用
structuredClone()拷贝（现代浏览器支持，保留Date等类型） - 如需拷贝后仍响应式，对结果再调用
reactive()（注意：此时Date等仍不会被代理，仅外层对象响应）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
