vue3直接修改reactive定义的变量

### Vue 3 中 `reactive` 声明变量后的正确赋值方式 在 Vue 3 中，`reactive` 是用于创建深层响应式对象的核心函数之一。当需要对通过 `reactive` 创建的对象进行赋值操作时，需要注意保持其响应性特性。 #### 直接修改属性的方式 对于简单的属性更新，可以直接修改 `reactive` 对象的属性值。这种方式不会破坏对象的响应性[^1]。 ```javascript import { reactive } from 'vue'; const state = reactive({ count: 0, }); // 正确地直接修改属性 state.count = 1; console.log(state.count); // 输出：1 ``` #### 使用 `Object.assign` 更新多个属性 如果需要一次性更新多个属性，可以使用 JavaScript 的内置方法 `Object.assign` 来实现。这种方法能够保留对象的响应性[^2]。 ```javascript import { reactive } from 'vue'; const person = reactive({ id: 10000, name: '哈哈', }); setTimeout(() => { Object.assign(person, { id: 10002, name: '呵呵' }); }, 5000); ``` 上述代码会在 5 秒后将 `person` 对象的 `id` 和 `name` 属性更新为新的值，并且页面上的绑定数据也会自动刷新。 #### 避免直接替换整个对象 需要注意的是，直接用 `=` 赋值符替换整个 `reactive` 对象会导致响应性的丢失[^3]。例如： ```javascript import { reactive } from 'vue'; const person = reactive({ id: 10000, name: '哈哈', }); // 错误示范：这会破坏响应性 person = { id: 10001, name: '吼吼' }; ``` 在这种情况下，虽然变量 `person` 已经被赋予了一个新值，但由于它不再是原始的 `reactive` 对象，因此无法触发视图更新。 --- ### 总结 为了确保 `reactive` 定义的对象始终保持响应性，在对其进行赋值时应遵循以下原则： 1. **直接修改单个属性**：适用于简单场景下的单一属性更新。 2. **批量更新多属性**：推荐使用 `Object.assign` 方法完成复杂的数据结构同步。 3. **避免整体覆盖**：切勿直接用 `=` 替换整个 `reactive` 对象实例。 ---