如何使用vue3中的 reactive

在 Vue 3 中，我们可以使用 `reactive` 函数来创建响应式对象。使用方法如下：

import { reactive } from 'vue';

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

在上面的示例中，我们首先导入 `reactive` 函数，然后使用它来创建一个响应式对象 `state`。我们可以像使用普通对象一样使用它，但是当我们修改 `state` 中的属性值时，Vue 会自动检测到这个变化并更新相关的组件。

例如，我们可以在模板中这样使用 `state` 对象：

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { reactive } from 'vue';

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

      const increment = () => {
        state.count++;
      };

      return {
        state,
        increment,
      };
    },
  };
</script>

在上面的示例中，我们首先在 `setup` 函数中使用 `reactive` 函数创建了一个响应式对象 `state`，然后将其返回给模板中使用。我们还定义了一个 `increment` 函数，在按钮被点击时会将 `state.count` 的值加 1，因为 `state` 是响应式的，所以这个变化会被自动检测并更新相关的组件。