Vue 中的对象赋值方法

Object.assign、this.$set、this.form.id 这三种赋值方式在JavaScript/Vue.js中有不同的用途和特点：

1. Object.assign

作用： 将一个或多个源对象的可枚举属性复制到目标对象中
特点：

• 是JavaScript原生方法，不特定于Vue
• 执行的是浅拷贝（只复制第一层属性）
• 不会触发Vue的响应式更新
• 适用于合并多个对象

// 示例
Object.assign(target, source1, source2);

2. this.$set

作用： Vue提供的专门用于向响应式对象添加新属性的方法
特点：

• 是Vue特有的方法
• 会确保新属性是响应式的
• 会触发视图更新
• 主要用于解决Vue无法检测属性添加的问题

// 示例
this.$set(this.someObject, 'newProperty', value);

3. this.form.id
   作用： 直接访问或修改对象的属性

特点：

• 普通JavaScript属性访问/赋值方式
• 对于已存在的响应式属性，修改会触发视图更新
• 对于新增属性，不会自动变为响应式（Vue 2.x中）

// 示例
this.form.id = newValue;  // 如果id是响应式的，会触发更新

主要区别总结

特性	Object.assign	this.$set	this.form.id
所属	JavaScript原生	Vue特有	JavaScript原生
响应式	不保证	保证	仅对已存在响应式属性有效
用途	对象合并	添加响应式属性	普通属性访问/修改
触发更新	不会	会	已存在属性会
适用场景	非Vue环境或不需要响应式	Vue中添加新响应式属性	修改已有响应式属性

在Vue项目中，如果要添加新属性并使它响应式，应该使用this.$set；如果只是修改已有响应式属性，直接赋值即可；如果需要合并对象且不关心响应式，可以使用Object.assign。