vue3 reactive的使用

在 Vue3 中，`reactive` 是一个新的 API，它可以将一个普通的 JavaScript 对象转换为响应式对象。使用 `reactive` 可以使对象的属性变成响应式的，当属性发生变化时，会触发相关联的界面更新。

下面是一个使用 `reactive` 创建响应式对象的例子：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, World!'
});

在这个例子中，我们使用 `reactive` 创建了一个名为 `state` 的响应式对象，其中包含两个属性：`count` 和 `message`。

使用 `reactive` 创建的对象可以像普通对象一样访问和修改属性。例如，要增加 `count` 的值，只需执行以下操作：

state.count++;

当执行这个操作时，Vue 会自动检测到 `count` 属性的变化，并更新相关联的界面。

需要注意的是，只有在模板中使用响应式对象的属性时，才能触发界面更新。如果在 JavaScript 中直接修改响应式对象的属性，则不会触发界面更新。如果需要在 JavaScript 中手动触发界面更新，可以使用 `triggerRef` 方法。