在我们的项目中，有时可能需要对通过 reactive 创建的响应式对象进行更改，而当我们像下面这样操作时，会使该对象失去响应式。
let obj = reactive({name: "Katrina",age: 18,
});
let change = function(){//obj失去响应式//reactive重新分配一个新对象，会失去响应式//1.直接重新赋值一个普通对象：obj = { name:"Winnie",age:18,hobby:"sing"}//2 . 重新赋值一个通过 reactive 创建的新响应式对象：obj = reactive({ name:"Winnie",age:18,hobby:"sing"})//以上两种都不可以!!
}
原因：
-
直接重新赋值一个普通对象：赋值后，
obj将不再是一个响应式对象。Vue 无法追踪这个普通对象的变化，因此任何对obj的修改都不会触发视图的更新。 -
虽然通过
reactive创建了一个新的响应式对象，但是这个新对象与原来的obj是完全不同的引用。在 Vue 的响应式系统中，只有原始的响应式对象（即最初通过
reactive创建的那个）会被跟踪。新的响应式对象
obj将是一个全新的独立实体，与原始的obj没有任何联系，因此对它的修改也不会反映到依赖原始obj的组件视图上。
通过Object.assign去整体替换
对象与原始类型的根本区别之一是，对象是“通过引用”存储和复制的
赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址”，也就是对该对象的“引用”。
那么，如果我们想要复制一个对象，那该怎么做呢？
我们可以创建一个新对象，通过遍历已有对象的属性，并在原始类型值的层面复制它们，以实现对已有对象结构的复制。
使用 Object.assign 方法可以达成效果：
语法：Object.assign(dest, [src1, src2, src3...])
在本例中作用：
- 保持相同引用： 使用
Object.assign对响应式对象进行更新时，并没有创建一个新的对象。相反，我们修改的是同一个响应式对象的属性。 - 响应式属性更新： 如果要 更新的对象 中的属性已经存在于目标响应式对象中，会更新这些属性的值。由于响应式对象的属性被更新，Vue 能够检测到这些变化并相应地更新 DOM。
- 添加新属性： 如果 要更新的对象 包含目标响应式对象中不存在的属性，会在目标对象上添加这些新属性。
let obj = reactive({name: "Katrina",age: 18,
});// 使用 Object.assign 更新响应式对象
Object.assign(obj, {name: "Winnie",age: 20,hobby: "sing"
});
在这个例子中，obj 的 name 和 age 属性被更新，同时 hobby 属性被添加。所有这些更改都会触发 Vue 的响应系统，因为它们都发生在同一个响应式对象 obj 上。
最后:
注意：Object.assign 只能处理自有的可枚举属性，并且它不会处理响应式对象的嵌套属性。
