vue3 reactive 赋值

在Vue 3中，`reactive` 是一个用来创建响应式数据对象的 API，它是 Vue 3 响应式系统的核心部分之一。`reactive` 函数接受一个普通对象作为参数，并返回一个响应式的代理对象，这个代理对象可以使用 ES6 的展开运算符（`...`）等进行赋值，而保持其响应性。

例如，如果你有一个普通的 JavaScript 对象：

const originalObject = {
  count: 0
};

你可以使用 `reactive` 来创建它的响应式代理：

import { reactive } from 'vue';

const reactiveObject = reactive(originalObject);

现在 `reactiveObject` 是一个响应式的代理对象，你可以像操作普通对象一样进行赋值操作，Vue 的响应式系统会捕捉到这些变化，并在模板或其他依赖这些响应式数据的地方进行相应的更新：

reactiveObject.count = 10; // 修改 count 的值

即使使用展开运算符，赋值操作后的对象仍然保持响应性：

const newObject = { ...reactiveObject };
newObject.count = 20; // 修改 count 的值

在这个例子中，`newObject` 中的 `count` 属性同样能够触发响应式更新。

使用 `reactive` 创建的响应式对象可以搭配 Vue 3 的 Composition API 中的其他函数，如 `computed`、`watchEffect` 等，来实现更复杂的响应式逻辑。