Vue中对象赋值问题：对象引用被保留仅部分属性被覆盖的解决方案

import { reactive } from 'vue';

const state = reactive({
  obj1: { name: "Alice", age: 25 },
});

// 尝试用新对象覆盖 obj1
const newObj = { name: "Bob", age: 30 };
state.obj1 = newObj; // 预期：obj1 完全变成 newObj
console.log(state.obj1); // { name: "Bob", age: 30 } ✅

// 但如果用解构赋值或 Object.assign，可能会出问题：
const anotherObj = { name: "Charlie" };
Object.assign(state.obj1, anotherObj); // ❌ 只修改了 name，age 仍然保留
console.log(state.obj1); // { name: "Charlie", age: 30 }（age 没变！）

state.obj1 = { ...newObj }; // 使用新对象替换
// 或
state.obj1 = Object.assign({}, newObj); // 创建新对象

import { ref } from 'vue';

const objRef = ref({ name: "Alice", age: 25 });

// 直接替换整个对象
objRef.value = { name: "Bob", age: 30 }; // ✅ 触发响应式更新

import { reactive } from 'vue';

const state = reactive({ obj1: { name: "Alice", age: 25 } });

// 方法1：直接赋值
state.obj1 = { name: "Bob", age: 30 }; // ✅

// 方法2：先置空再赋值（确保触发依赖更新）
state.obj1 = null; // 强制清除旧引用
state.obj1 = { name: "Bob", age: 30 }; // ✅

// Vue 2 专用
Vue.set(state, 'obj1', { name: "Bob", age: 30 });

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: { name: "Alice" }
});

// 修改数据
state.count++; // 直接修改
state.user.name = "Bob"; // 深层属性也是响应式的

import { ref } from 'vue';

const count = ref(0); // 基本类型
const user = ref({ name: "Alice" }); // 对象

// 修改数据
count.value++; // 必须用 .value
user.value.name = "Bob"; // 深层属性也是响应式的

// 完全替换对象
user.value = { name: "Charlie" }; // ✅ 仍然保持响应式

const state = reactive({ count: 0 });
state = { count: 1 }; // ❌ 错误！不能直接替换整个 reactive 对象

Object.assign(state, { count: 1 }); // ✅ 修改属性（响应式）

const countRef = ref(0);
countRef.value = 1; // ✅ 可以直接替换

<template>
  <div>{{ state.count }}</div> <!-- 直接使用 -->
</template>

<template>
  <div>{{ countRef }}</div> <!-- 自动解包，无需 .value -->
</template>

console.log(countRef.value); // 必须用 .value

const user = ref({
  name: "Alice",
  age: 25
});

// 修改方式
user.value.name = "Bob"; // ✅ 响应式
user.value = { name: "Charlie" }; // ✅ 仍然响应式

const state = reactive({ count: 0, name: "Alice" });
const { count, name } = toRefs(state); // 解构后仍然是响应式

// 使用方式
count.value++; // 必须用 .value

import { isRef, isReactive } from 'vue';

console.log(isRef(countRef)); // true
console.log(isReactive(state)); // true