清空 reactive 对象应只修改原 Proxy 属性而非替换引用：对象用 Object.assign(obj, {}) 或 delete 遍历；数组用 arr.length = 0；避免 obj = {} 或 arr = [] 等替换引用操作，否则丢失响应式。
不能直接用 obj = {}，否则会丢失响应式——因为这相当于把变量指向了一个全新的、非 reactive 的普通对象。
清空 reactive 对象的推荐方式（保留响应式）
核心原则：只修改原 Proxy 对象的属性，不替换整个引用。
-
用
Object.assign(obj, {})—— 最简洁常用。它会把目标对象（obj）的所有自有可枚举属性清空，且 Vue 能正确追踪变化。 -
用
delete遍历删除 —— 更彻底，尤其适合存在不可枚举属性或需确保完全“无键”的场景：Object.keys(obj).forEach(key => delete obj[key]) -
重置为默认结构（带初始值） —— 适合表单重置：
Object.assign(obj, { name: '', age: 0, status: null })
为什么这些方式有效，而其他方式不行？
reactive 返回的是一个 Proxy，Vue 依赖这个 Proxy 拦截属性操作。只要操作发生在原 Proxy 上（如 assign、delete、赋值 obj.key = val），响应式链路就保持完整。
-
obj = reactive({})❌：创建新 Proxy，原引用失效，视图不再响应。 -
obj = {}❌：赋值给普通对象，彻底脱离响应式系统（且 const 声明下语法报错）。 -
Object.assign({}, obj)❌：清空的是新对象，原obj没变。
清空 reactive 数组的正确写法
数组不是对象，清空逻辑不同：
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“前端免费学习笔记（深入）”；
-
推荐：
arr.length = 0—— 响应式、高效、语义清晰。 -
arr.splice(0)或arr.splice(0, arr.length)—— 同样有效，兼容性略广。 -
arr = []❌：替换引用，丢失响应式。
小技巧：封装一个通用清空函数
便于复用，避免重复写逻辑：
const clearReactive = (target) => {
if (Array.isArray(target)) {
target.length = 0
} else if (target && typeof target === 'object') {
Object.keys(target).forEach(key => delete target[key])
}
}
调用：clearReactive(myForm) 即可安全清空。
