Vue.set 和 Object.assign 的区别

Object.assign() 是一个用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的 JavaScript 原生方法。它常用于合并对象。

Object.assign() 示例：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const result = Object.assign({}, obj1, obj2, obj3);
console.log(result); // { a: 1, b: 2, c: 3 }

在这个例子中，Object.assign() 将 obj1、obj2 和 obj3 的属性合并到一个新的空对象中。

Vue.set() 和 Object.assign() 的区别：

1. 响应性：

   • Vue.set() 保证添加的属性是响应式的，Vue 可以检测到变化并更新视图。
   • Object.assign() 只是简单的复制属性，不会使新属性变为响应式，Vue 不能检测到变化。

2. 数组索引：

   • Vue.set() 可以用于向数组设置响应式的索引值。
   • Object.assign() 不能用于数组，因为它会将数组作为对象处理。

3. 性能：

   • Vue.set() 直接修改原对象，性能更好。
   • Object.assign() 会创建一个新对象，并将源对象的属性复制到新对象上，性能稍差。

总结：Vue.set() 用于在 Vue 中确保响应性，而 Object.assign() 用于普通的对象合并。