vue3 reactive对象重新赋值

// 使用 Vue 3 的 reactive 创建一个响应式对象
import { reactive } from 'vue';

// 创建一个响应式对象
let state = reactive({
  count: 0
});

// 重新赋值给 reactive 对象的属性
state.count = 1; // 这种方式会触发视图更新

// 如果想替换整个 reactive 对象，可以这样做：
state = reactive({
  count: 2
}); // 这样做不会触发视图更新，因为 state 的引用变了

// 正确的方式是使用扩展运算符或者 Object.assign 来更新对象的属性
Object.assign(state, {
  count: 3
}); // 这样会触发视图更新

// 或者使用扩展运算符
state = { ...state, count: 4 }; // 这样也会触发视图更新

// 总结：直接修改 reactive 对象的属性会触发视图更新，但重新赋值整个 reactive 对象不会触发更新。

解释说明：

• reactive 函数用于创建一个响应式对象。
• 直接修改 reactive 对象的属性（如 state.count = 1）会触发视图更新。
• 如果尝试直接重新赋值整个 reactive 对象（如 state = reactive({ count: 2 })），则不会触发视图更新，因为这会改变 state 的引用。
• 为了正确地更新整个对象并触发视图更新，应该使用 Object.assign 或扩展运算符来更新对象的属性。