vue3 对象赋值

// Vue 3 对象赋值示例代码

// 引入 Vue 3
import { reactive, ref } from 'vue';

// 创建一个响应式对象
const state = reactive({
  user: {
    name: 'Alice',
    age: 25
  }
});

// 创建一个普通的对象
const newUser = {
  name: 'Bob',
  age: 30
};

// 方法1：直接赋值（浅拷贝）
state.user = { ...newUser };
// 解释：这里使用了扩展运算符 (...) 来进行浅拷贝，将 newUser 的属性复制到 state.user 中。
// 注意：这种方式只适用于浅层对象，对于深层嵌套的对象，可能会导致响应式失效。

// 方法2：使用 Object.assign 进行赋值
Object.assign(state.user, newUser);
// 解释：Object.assign 也可以用于浅拷贝，它会将 newUser 的属性合并到 state.user 中。
// 注意：同样只适用于浅层对象。

// 方法3：使用 reactive 函数创建新的响应式对象
state.user = reactive(newUser);
// 解释：这种方式会将 newUser 转换为一个新的响应式对象，并赋值给 state.user。
// 这种方法适用于需要保持响应式的场景。

// 方法4：使用 ref 包装对象
const userRef = ref(newUser);
// 解释：ref 可以用于包装基本类型和对象，使其成为响应式。通过 .value 访问或修改其值。
// 使用时需要通过 userRef.value 访问对象属性。