vue3项目：更改reative对象失去响应式？

在我们的项目中，有时可能需要对通过 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"
  })
  //以上两种都不可以!!
}

原因：

1. 直接重新赋值一个普通对象：赋值后，obj 将不再是一个响应式对象。Vue 无法追踪这个普通对象的变化，因此任何对 obj 的修改都不会触发视图的更新。

2. 虽然通过 reactive 创建了一个新的响应式对象，但是这个新对象与原来的 obj 是完全不同的引用。

   在 Vue 的响应式系统中，只有原始的响应式对象（即最初通过 reactive 创建的那个）会被跟踪。

   新的响应式对象 obj 将是一个全新的独立实体，与原始的 obj 没有任何联系，因此对它的修改也不会反映到依赖原始 obj 的组件视图上。

通过Object.assign去整体替换

对象与原始类型的根本区别之一是，对象是“通过引用”存储和复制的

赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址”，也就是对该对象的“引用”。

那么，如果我们想要复制一个对象，那该怎么做呢？

我们可以创建一个新对象，通过遍历已有对象的属性，并在原始类型值的层面复制它们，以实现对已有对象结构的复制。

使用 Object.assign 方法可以达成效果：

语法：Object.assign(dest, [src1, src2, src3...])

在本例中作用：

1. 保持相同引用： 使用 Object.assign 对响应式对象进行更新时，并没有创建一个新的对象。相反，我们修改的是同一个响应式对象的属性。
2. 响应式属性更新： 如果要 更新的对象 中的属性已经存在于目标响应式对象中，会更新这些属性的值。由于响应式对象的属性被更新，Vue 能够检测到这些变化并相应地更新 DOM。
3. 添加新属性： 如果 要更新的对象 包含目标响应式对象中不存在的属性，会在目标对象上添加这些新属性。

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 只能处理自有的可枚举属性，并且它不会处理响应式对象的嵌套属性。