核心结论：点了取消编辑，列表里的原数据还是变了，根因不是 "取消按钮没生效"，而是编辑草稿和列表项在内存里指向同一个对象 —— 表单改动直接写在了源对象上，取消只是丢弃草稿变量，已经写到共享对象上的值不会自动回来。原因是 JavaScript 的对象、数组是引用类型，{ ...row } 展开只复制第一层，嵌套的标签数组、子对象仍然和原记录共享同一份引用；再叠加双向表单直接绑定源数据、弹窗关闭未重置，就会出现 "明明取消了，列表却被改了"。排查路径是先比对列表项和草稿的引用是否相同，再按 "只复制可编辑字段建独立草稿" 或 "structuredClone 整体克隆" 断开引用，保存时才生成独立载荷写回列表。下面把成因、示例和解法拆开讲。
一、问题现场：取消只是丢弃变量，引用还在
典型代码长这样：
const draft = { ...selected, tags: [...selected.tags] };
draft.tags[0].name = "已归档";
// 点取消：直接丢弃 draft
跑一遍引用检查：
const row = makeRow();
const draft = { ...row, tags: [...row.tags] };
draft.tags[0].name = "已归档";
console.log(row === draft); // false 外层对象已断开
console.log(row.tags === draft.tags); // false 数组已断开
console.log(row.tags[0] === draft.tags[0]); // true 标签对象仍共享
console.log(row.tags[0].name); // "已归档"
外层记录和标签数组确实复制了，但数组里的标签对象还是同一个。改 draft.tags[0].name，两个容器看到的是同一个对象的新值；关闭弹窗只丢草稿变量，已经写进共享对象的值留在原地。
二、三个常见成因
| 成因 | 表现 | 本质 |
|---|---|---|
| 表单直接绑定源对象 | 输入框 v-model/value 绑的是列表项本身，敲字就改源数据 | 没有草稿层，源数据被就地修改 |
| 浅拷贝只断第一层 | 外层复制了，嵌套对象 / 数组仍共享引用 | ... 展开、concat、slice 都是浅拷贝 |
| 弹窗未销毁、未重置 | 关闭只是隐藏，下次打开残留上次输入 | 组件复用，表单状态没有回到初始值 |
补充一点：排序、筛选返回的新数组里，记录对象仍然指向原对象，排序本身不会制造隔离。
三、三种解法
解法一：按可编辑字段建独立草稿（推荐，最省性能）
弹窗只编辑标题和标签时，只复制这些字段，嵌套子项逐个新建对象；保存时再生成纯净载荷，后续输入也不会污染保存数据。
function copyTags(tags) {
return tags.map(({ id, name }) => ({ id, name }));
}
function beginEdit(row) {
return { id: row.id, title: row.title, tags: copyTags(row.tags) };
}
function buildSavePayload(draft) {
return { title: draft.title.trim(), tags: copyTags(draft.tags) };
}
- 点取消：直接丢弃 edit，原记录一个字节都没动。
- 点保存：把 edit.id 作记录标识，把 payload 交给保存逻辑；服务端确认后再用返回记录更新列表。
- 新增可编辑嵌套字段时，草稿和载荷的复制范围要同步加。
解法二：structuredClone 整体克隆（全量可克隆数据）
表单确实要编辑整份普通数据对象、字段都支持结构化克隆时，直接深克隆，嵌套对象、Date 一并断开：
const cloned = structuredClone(detailed);
cloned.tags[0].name = "已归档";
console.log(detailed.tags[0].name); // 待整理，原数据不动
注意：对象里的函数会抛 DataCloneError；含自定义原型或属性描述符的对象，先确认克隆后行为是否符合预期。
解法三：快照回滚（需要还原旧值的场景）
打开编辑时先存一份原始快照，取消时用快照覆盖回表单状态；适合表单组件被复用、关闭只隐藏不销毁的情况，配合 form.resetFields() 类方法一起用。
四、按操作场景选复制范围
| 操作场景 | 需要的复制范围 |
|---|---|
| 只排序、渲染列表 | 新数组即可，记录对象只读共享 |
| 编辑标题与标签 | 新建草稿，标签等嵌套子对象逐个新建 |
| 草稿交给异步保存 | 提交时生成独立载荷，避免后续输入污染 |
| 编辑整份可克隆数据 | 用 structuredClone 完整克隆 |
【常见问题】
问题 1：点了取消编辑，为什么列表里的原数据还是变了？
回答 1：因为编辑草稿和列表项是对象引用共享，{ ...row } 浅拷贝只断开第一层，嵌套对象仍指向原记录，表单改动直接写在源对象上；取消只丢弃草稿变量，写进共享对象的值不会回滚，所以列表原数据看起来已经变了。
问题 2：为什么用了展开运算符 ... 还是改到了原数据？
回答 2：展开运算符是浅拷贝，只复制对象第一层属性，嵌套的标签数组、子对象没有新建，仍与源数据共享引用；改嵌套字段时原记录同步变化，必须对子项逐个新建对象或用 structuredClone 深克隆才能断开。
问题 3：编辑表单应该怎么建草稿才能保证取消不影响列表？
回答 3：按可编辑字段构造独立草稿，嵌套子项逐个新建对象，保存时由草稿生成独立载荷再写回列表；点取消直接丢弃草稿即可，不要让表单直接绑定列表源对象，也不要把草稿引用直接交给异步保存逻辑。
问题 4：structuredClone 和手动浅拷贝怎么选？
回答 4：只编辑少量字段时手动按字段建草稿更省性能，且避免克隆函数等不可克隆内容；表单要编辑整份普通对象、字段都支持结构化克隆时用 structuredClone，它会连同 Date、循环引用一起完整断开，遇到函数会抛 DataCloneError。
问题 5：弹窗关闭后再次打开还残留上次输入，和原数据被改是一回事吗？
回答 5：不是同一根因但常一起出现：原数据被改是引用共享导致就地写脏；残留输入是弹窗组件关闭只隐藏不销毁、表单状态没重置，需要在打开时重建草稿或调用 resetFields 把表单回到初始值。
【参考资料】
- [2026-11-14]（点了取消编辑，为什么列表里的原数据还是变了？）阿里云开发者社区
- [2026-10-22]（JS 中怎么在 Vue 响应式数据处理中选择浅拷贝还是深拷贝）PHP 中文网
- [2025-08-26]（React 表单状态管理：浅拷贝与深拷贝的实现与应用）博客园
- [2026-11-03]（响应式基础）Vue.js 中文官方文档
- [2022-08-03]（vue 编辑弹窗，列表数据也会跟着变）CSDN 博客
【免责声明】
本文为前端数据绑定与对象拷贝的通用技术解读，示例为自制简化代码，实际项目需按所用框架（Vue/React 等）的响应式机制和表单组件 API 落地；代码片段不构成生产环境完整方案，具体克隆方式请结合数据结构与浏览器兼容性自行验证。