Object.assign() 在 Vue 3 中的响应式更新与使用方法

例如

function changeCar(){
  //car = {brand: '五菱宏观',price:5} // 页面不更新
  //car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
  Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
}

1. 这种方式赋值，页面不会更新:

car = { brand: '五菱宏观', price: 5 };

• 原因：直接赋值会将 car 对象替换为新的对象，Vue 3 中的响应式系统无法追踪到 car 对象的变化（如果 car 是一个响应式对象）。
• 解决方法：如果需要更改 car 对象的属性，应该使用 Vue 的响应式方法或使用 Object.assign() 来修改属性

2.使用 reactive() 创建响应式对象（页面不更新）

// 直接重新赋值一个新的对象，页面不会显示更新
car = reactive({ brand: '五菱宏观', price: 5 });

• 原因：虽然 reactive() 创建了响应式对象，但重新给 car 赋新值并不会触发视图更新，因为 Vue 的响应式系统是基于对象引用的。如果你替换了 car 对象，Vue 失去了对旧对象的跟踪。
• 解决方法：应避免直接重新赋值整个响应式对象，而是通过修改对象内部属性的方式来触发更新

3.使用 Object.assign() 合并对象（修改属性并更新页面）

// 使用 Object.assign 合并新属性，页面会更新
Object.assign(car, { brand: '五菱宏观', price: 5 });

• 效果：Object.assign() 会将新对象的属性合并到原对象 car 中。由于 car 对象是响应式的，Object.assign() 会修改 car 的属性并触发页面更新
• 优点：此方法不会替换原对象，而是修改已有对象的属性，可以保证响应式系统正常工作，视图也会更新
• 类似于：Object.assign(原对象,{ xx：'追加进来的数据'}