vue3reactive使用

Vue 3 的 `reactive` 是响应式对象的核心功能之一，它用于将普通的 JavaScript 对象转换为 Vue 模板能够监听其变化的对象。当你在一个对象上调用 `reactive`，Vue 将自动追踪该对象的深度嵌套属性，并当这些属性发生变化时，对应的视图会自动更新。

举个例子：

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York'
  }
});

// 当 user 的属性修改时，视图会自动更新
user.name = 'Bob'; // 视图中的用户名会被更新
user.address.city = 'San Francisco'; // 地址城市也会同步改变

// 相关问题--
1. reactive 与 watch 区别是什么？
2. 如何避免在 reactive 中创建循环引用导致的数据更新问题？
3. 是否可以在 Vue 组件内部直接使用 reactive 还是需要配合 setup 函数使用？