在Vue.js中，直接复制对象时默认复制的是引用地址而非值本身，导致修改副本会同步影响原对象，这是因为JavaScript对象属于引用类型，直接赋值仅传递内存指针，为避免数据污染，需通过深拷贝实现值复制，常用方法包括JSON.parse(JSON.stringify())（适用于简单对象）或lodash的_.cloneDeep（处理复杂对象如函数、循环引用），深拷贝会创建全新对象，确保数据独立性，是Vue开发中处理对象复制的正确实践。
Vue.js 中对象复制：为何"值不是地址"与深拷贝的实践
在 JavaScript 开发中，对象的"引用特性"是开发者绕不开的核心概念：直接复制对象时，实际复制的是对象的内存地址，而非值本身，这意味着对新对象的修改会直接影响原对象，但在 Vue.js 的响应式系统中，我们常常需要"复制对象的值而非地址"，即实现深拷贝，以避免数据污染或响应式异常，本文将结合 Vue.js 的特性，深入探讨对象复制的本质及实践方法。
先搞懂：JavaScript 中对象的"地址复制"问题
在 JavaScript 中，对象（包括数组、函数等引用类型）与基本类型（字符串、数字、布尔值等）的存储方式完全不同，基本类型的变量直接存储值，而对象的变量存储的是指向对象内存空间的地址，直接复制对象时，本质是复制了地址，两个变量会指向同一个对象。
示例：地址复制的"副作用"
const originalObj = { name: 'Vue', version: 3 };
const copiedObj = originalObj; // 复制的是地址
copiedObj.version = 2; // 修改新对象
console.log(originalObj.version); // 输出 2 —— 原对象也被修改！
这里的 copiedObj 和 originalObj 指向同一块内存，因此修改 copiedObj 会直接影响 originalObj，这就是"地址复制"的核心问题：共享引用，无法独立操作。
Vue.js 中为何需要"值复制（深拷贝）"？
Vue.js 的核心是响应式系统，它通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持对象属性，实现数据变化时视图的自动更新，但在实际开发中，我们常遇到需要"复制对象"的场景，此时若直接使用地址复制，可能会引发两类问题：
响应式数据的意外污染
当复制的对象是 Vue 实例的 data 或 props 时，地址复制会导致新对象与原对象共享响应式依赖，修改新对象时，不仅原对象被修改，还可能触发不必要的视图更新或副作用。
// Vue 2 组件示例
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
},
methods: {
copyUser() {
const newUser = this.user; // 地址复制
newUser.age = 30; // 修改新对象
console.log(this.user.age); // 输出 30 —— 原数据被污染！
// 更严重的是，可能触发不必要的视图更新
this.$nextTick(() => {
// 即使没有直接修改 this.user，视图也可能重新渲染
});
}
}
};
独立数据副本的需求
在表单编辑、数据快照、列表操作等场景中，我们需要"临时操作"数据，且不希望影响原始数据。
- 表单编辑：编辑用户信息时，先复制一份副本进行修改，确认无误后再替换原数据
- 数据快照：保存某个状态的历史版本，以便后续回滚
- 列表操作：对列表项进行排序、筛选等操作，需要保留原始数据不变
Vue.js 中实现"值复制（深拷贝）"的 5 种方法
要实现"复制对象的值而非地址"，本质是深拷贝，在 Vue.js 项目中，可通过以下方法实现，不同方法适用于不同场景。
方法 1：JSON.parse(JSON.stringify()) —— 简单但有限制
这是最基础的深拷贝方法,通过"序列化（JSON.stringify）"将对象转为 JSON 字符串，再"反序列化（JSON.parse）"还原为新对象，由于 JSON 格式不支持函数、undefined、循环引用等，该方法存在明显限制。
示例：
const originalObj = {
name: 'Vue',
version: 3,
methods: () => console.log('Hello Vue'),
undefinedProp: undefined,
date: new Date(),
regex: /test/g
};
const copiedObj = JSON.parse(JSON.stringify(originalObj));
copiedObj.version = 2;
console.log(copiedObj.methods); // 输出 undefined —— 函数丢失
console.log(copiedObj.undefinedProp); // 输出 undefined —— undefined 丢失
console.log(copiedObj.date instanceof Date); // false —— Date 对象转为字符串
console.log(copiedObj.regex); // 输出 {} —— 正则表达式丢失
console.log(originalObj.version); // 输出 3 —— 原对象未受影响
适用场景：
- 仅需复制纯数据对象（无函数、
undefined、循环引用、特殊对象等） - 对性能要求不高,且不想引入第三方库
注意事项：
- 无法复制函数、
Symbol、undefined、循环引用等属性 - 会丢失对象的原型链（
copiedObj.__proto__会指向Object.prototype，而非原对象的原型） - 特殊对象（如 Date、RegExp、Map、Set）会被转为普通对象或字符串
方法 2：lodash.cloneDeep —— 功能全面，推荐使用
Lodash 是一个流行的 JavaScript 工具库，其 cloneDeep 方法能完美处理各种复杂对象的深拷贝，包括函数、Symbol、循环引用等，是 Vue.js 项目中的"万金油"方案。
安装：
npm install lodash # 或引入 CDN <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
示例：
import { cloneDeep } from 'lodash';
const originalObj = {
name: 'Vue',
version: 3,
methods: () => console.log('Hello Vue'),
nested: { prop: 'value' },
circular: null
};
// 创建循环引用
originalObj.circular = originalObj;
const copiedObj = cloneDeep(originalObj);
copiedObj.version = 2;
copiedObj.nested.prop = 'new value';
console.log(copiedObj.methods); // 输出 () => console.log('Hello Vue') —— 函数保留
console.log(originalObj.version); // 输出 3
console.log(originalObj.nested.prop); // 输出 'value' —— 嵌套对象未受影响
console.log(copiedObj.circular !== originalObj); // true —— 循环引用正确处理
适用场景：
- 需要复制复杂对象（含函数、
Symbol、循环引用、嵌套对象等） - 对拷贝的准确性和稳定性要求高
优点：
- 功能全面,覆盖所有数据类型
- 处理循环引用（避免栈溢出）
- 保留原型链和对象属性描述符
- 支持自定义拷贝行为（通过
customizer函数）
方法 3：Vue 3 的 structuredClone —— 原生支持，性能较好
Vue 3 基于现代 JavaScript 标准，推荐使用浏览器原生支持的 structuredClone 方法（全局可用），它是 Web API 提供的深拷贝方法，性能优于 JSON.parse(JSON.stringify())，且支持更多数据类型（如 Date、RegExp、Map、Set 等）。
示例：
const originalObj = {
name: 'Vue',
date: new Date(),
regex: /test/g,
map
