vue3中reactive用法

在 Vue 3 中，`reactive` 函数用于将一个普通的 JavaScript 对象转换为响应式对象。使用 `reactive` 函数创建的对象，可以在视图中使用，并且当对象的属性发生变化时，视图会自动更新。

例如，下面是一个普通的 JavaScript 对象：

const state = {
  count: 0
};

使用 `reactive` 函数将其转换为响应式对象：

import { reactive } from 'vue';

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

现在，`state` 对象是一个响应式对象，你可以在 Vue 模板中使用它，例如：

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

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

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

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

在上面的示例中，当按钮被点击时，`increment` 函数会增加 `state.count` 的值，这会触发视图的更新，并且显示最新的计数器值。