reactive 与 ref 的区别

在 Vue.js 中，reactive 是 Vue 3 引入的一个新的 API，用于创建响应式对象。这种方法是 Composition API 的一部分，它提供了一种更灵活的方式来组织和重用逻辑。

reactive 的基本用法

使用 reactive，你可以将普通的 JavaScript 对象转换为响应式对象。当这个对象的属性发生变化时，Vue 会自动检测这些变化并更新视图。

import { reactive } from 'vue';

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

在这个例子中，state 是一个响应式对象，我们可以在组件中使用它，并且当我们更改 state.count 的值时，所有使用到 state.count 的地方都会自动更新。

reactive 与 ref 的区别

• ref 用于包裹一个基本数据类型（如字符串、数字等），使其变为响应式的。访问或修改 ref 包裹的值时，需要通过 .value 属性。
• reactive 直接接收一个对象，并使这个对象的所有嵌套属性都变为响应式的。访问或修改 reactive 返回的对象时，直接像操作普通对象一样即可。

响应式转换的注意事项

需要注意的是，reactive 是基于 ES6 的 Proxy 实现的，它会返回原始对象的响应式代理。这意味着当你操作返回的响应式对象时，实际上是通过代理间接操作原始对象的。

const original = { foo: 1 };
const observed = reactive(original);
console.log(observed.foo === original.foo); // true

另外，reactive 会深度地将一个对象内部的所有属性转换为响应式（包括对象内部嵌套的对象），但如果给响应式对象赋值一个新的非响应式对象，这个新对象不会自动变成响应式的。

使用场景

• 当你需要管理的状态是一个复杂对象，并且你希望对象内部的修改都能触发视图更新时，推荐使用 reactive。
• 对于单一的基本类型值，或者当你需要引用一些可能会被替换的响应式对象时，使用 ref 更合适。

reactive 提供了一种强大且灵活的方式来创建和管理响应式状态，特别是在使用 Vue 3 的 Composition API 构建大型应用时，它可以帮助你更好地组织和复用逻辑。

什么是响应式对象

在 Vue.js 框架中，响应式对象是一个非常核心的概念。简单来说，响应式对象指的是 Vue 可以跟踪其属性变化的对象。当这些对象的状态（属性值）发生变化时，Vue 会自动确保视图与这些状态保持同步，即视图会相应地进行更新。

如何创建响应式对象

在 Vue 3 中，主要通过 reactive 和 ref 函数来创建响应式对象。

• 使用 reactive 创建响应式对象：

reactive 函数接受一个普通 JavaScript 对象，并返回该对象的响应式代理。这个代理对象的所有嵌套属性也都是响应式的。

import { reactive } from 'vue';

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

在上面的例子中，我们创建了一个响应式对象 state，其中包含一个属性 count。当我们更改 state.count 的值时，依赖 state.count 的任何视图都会自动更新。

• 使用 ref 创建响应式数据：

ref 函数可以将基本数据类型（如字符串、数字等）包裹起来，使其变为响应式。与 reactive 不同，通过 ref 创建的响应式数据在访问或修改时，需要使用 .value 属性。

import { ref } from 'vue';

const count = ref(0);

在此例中，count 是一个通过 ref 创建的响应式引用，存储的是数字 0。要修改 count 存储的值，我们需要通过 count.value 来进行。

响应式系统的工作原理

Vue 的响应式系统基于 ES6 的 Proxy 特性。当你使用 reactive 或 ref 创建响应式对象时，Vue 内部会基于 Proxy 为原始对象创建一个代理（Proxy）。这个代理使得 Vue 能够在属性被访问或修改时进行拦截，以实现数据的响应式变化。

当响应式对象的属性值发生变化时，Vue 能够自动侦测到这些变化，并重新执行依赖这些数据的组件的渲染函数，从而更新视图。这个过程是自动且高效的，开发者无需手动更新 DOM。

总的来说，响应式对象是 Vue 数据响应系统的基石，它让状态与视图之间的同步变得自然且无缝，极大提升了开发效率和用户体验。