Vue3响应式API：reactive函数的使用教程

Vue3 的 reactive 是一个函数，用于将一个普通对象转换成响应式对象。

使用方法如下：

引入 reactive 函数：

import { reactive } from 'vue';

创建一个普通对象：

const myObject = {
  foo: 'bar',
  baz: {
    qux: 'quux'
  }
};

使用 reactive 函数将对象转换成响应式对象：

const reactiveObject = reactive(myObject);

此时 reactiveObject 就是一个响应式对象，对其进行修改会自动触发界面的重新渲染。例如：

reactiveObject.foo = 'hello';

也可以在组件的 setup 函数中使用 reactive：

import { reactive } from 'vue';

export default {
  setup() {
    const myObject = {
      foo: 'bar',
      baz: {
        qux: 'quux'
      }
    };

    const reactiveObject = reactive(myObject);

    return {
      reactiveObject
    };
  }
}

在模板中使用 reactiveObject：

<template>
  <div>
    <p>{{ reactiveObject.foo }}</p>
    <p>{{ reactiveObject.baz.qux }}</p>
  </div>
</template>