vue3中reactive

在 Vue 3 中，`reactive` 是一个函数，它可以将一个普通的 JavaScript 对象转换为响应式对象。这个响应式对象可以被 Vue 自动侦测到其属性的变化，并且可以触发相应的更新。

以下是一个简单的示例代码：

<template>
  <div>
    <p>用户名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <button @click="changeUser">修改用户信息</button>
  </div>
</template>

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

export default {
  setup() {
    const user = reactive({
      name: '张三',
      age: 18,
    });

    function changeUser() {
      user.name = '李四';
      user.age = 20;
    }

    return {
      user,
      changeUser,
    };
  },
};
</script>

在上面的代码中，我们使用 `reactive` 函数将一个普通的 JavaScript 对象 `user` 转换为了一个响应式对象。然后，在模板中，我们可以直接使用 `user` 对象的属性，并且这些属性的变化会被 Vue 自动侦测到并更新。在 `changeUser` 方法中，我们修改了 `user` 对象中的属性，从而触发了更新。最后，在模板中，我们使用 `@click` 来监听点击事件并调用 `changeUser` 方法。