reactive和ref的赋值解构

在 Vue 3 中，`reactive` 和 `ref` 是用于响应式数据的两种不同方式。

`reactive` 用于将一个普通的 JavaScript 对象转换为响应式对象。它会递归地将对象的所有属性转换为响应式，并返回一个代理对象。这意味着当你访问或修改这个代理对象的属性时，Vue 会自动追踪依赖并触发重新渲染。

`ref` 用于将一个普通的 JavaScript 值转换为响应式对象。它返回一个带有 `value` 属性的对象，当你访问或修改 `value` 属性时，Vue 会追踪依赖并触发重新渲染。相比于 `reactive`，`ref` 对象更像是一个容器，它可以包装任何类型的值。

在赋值和解构方面，使用 `reactive` 和 `ref` 略有不同。如果你想将一个值赋给 `reactive` 对象的属性，你可以直接对其进行赋值。例如：

const state = reactive({ count: 0 });
state.count = 1;

而对于 `ref` 对象，你需要通过 `value` 属性进行赋值：

const count = ref(0);
count.value = 1;

在解构时，对于 `reactive` 对象，你可以直接解构出其中的属性，并对其进行赋值：

const state = reactive({ count: 0 });
const { count } = state;
count = 1;

对于 `ref` 对象，你同样可以解构出 `value` 属性，并对其进行赋值：

const count = ref(0);
const { value } = count;
value = 1;

需要注意的是，当你对 `ref` 对象进行解构时，解构出的是一个普通的值，而不是一个响应式对象。如果你需要响应式的属性，仍然需要通过 `ref` 或 `reactive` 来创建。