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 函数使用？

相关问题

vue3 reactive的使用

在 Vue3 中，`reactive` 是一个新的 API，它可以将一个普通的 JavaScript 对象转换为响应式对象。使用 `reactive` 可以使对象的属性变成响应式的，当属性发生变化时，会触发相关联的界面更新。

下面是一个使用 `reactive` 创建响应式对象的例子：

import { reactive } from 'vue';

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

在这个例子中，我们使用 `reactive` 创建了一个名为 `state` 的响应式对象，其中包含两个属性：`count` 和 `message`。

使用 `reactive` 创建的对象可以像普通对象一样访问和修改属性。例如，要增加 `count` 的值，只需执行以下操作：

state.count++;

当执行这个操作时，Vue 会自动检测到 `count` 属性的变化，并更新相关联的界面。

需要注意的是，只有在模板中使用响应式对象的属性时，才能触发界面更新。如果在 JavaScript 中直接修改响应式对象的属性，则不会触发界面更新。如果需要在 JavaScript 中手动触发界面更新，可以使用 `triggerRef` 方法。

vue3 reactive

Vue3中的响应式系统是通过`reactive`函数实现的。`reactive`函数接收一个普通对象作为参数，并返回一个响应式的Proxy对象，该Proxy对象会在对象属性被修改时自动触发重新渲染。例如：

import { reactive } from 'vue';

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

// 访问 state.count
console.log(state.count); // 0

// 修改 state.count
state.count++;

// state.count 发生变化，触发重新渲染
console.log(state.count); // 1

在上面的例子中，我们创建了一个响应式的对象`state`，并对其属性进行了修改。由于`state`是响应式的，当`state.count`发生变化时，Vue3会自动触发重新渲染相关的组件。这就是Vue3的响应式系统。