Vue 3学习理解 Object.assign浅拷贝

一、前言
- 1.什么是 Object.assign() 方法？
- 2.在 Vue 3 中的应用
- 3.注意事项
- 4.结语

一、前言

在Vue 3中，我们经常需要对对象进行合并或复制操作。其中，Object.assign() 方法是一个常用的方法，用于将一个或多个源对象的属性复制到目标对象中。本文将深入介绍 Vue 3 中 Object.assign 的用法和原理，帮助您更好地理解和应用这一方法。

1.什么是 Object.assign() 方法？

Object.assign() 是一个用于对象合并的静态方法，它接收一个目标对象和一个或多个源对象作为参数，将源对象的属性复制到目标对象中，并返回目标对象。该方法会将源对象的可枚举属性（包括继承的属性）复制到目标对象中，但不会复制其原型链上的属性。

2.在 Vue 3 中的应用

在 Vue 3 中，我们经常需要将一个对象的属性复制到另一个对象中，例如在组件间传递数据或在数据更新时进行合并操作。Object.assign() 方法可以很方便地实现这一功能。以下是一个示例：

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };const mergedObject = Object.assign({}, target, source);
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

在上面的例子中，我们创建了一个目标对象 target 和一个源对象 source，然后使用 Object.assign() 方法将源对象的属性复制到目标对象中，生成了一个新的合并后的对象 mergedObject。

3.注意事项

Object.assign() 方法执行的是浅拷贝，即只复制对象的属性值，如果属性值是对象，则复制的是对象的引用。
如果目标对象中已经存在相同属性名，源对象的属性将会覆盖目标对象的属性。
Object.assign() 不会处理继承属性和不可枚举属性。
若要进行深拷贝，可以考虑使用其他方法或工具库，如 JSON.parse(JSON.stringify(obj)) 或 lodash.cloneDeep()。