深入理解Vue3中ref与reactive的差异

在 Vue3 中，ref 和 reactive 是两种用于创建响应式数据的方法，但它们在使用上有一些重要的区别。

1. 使用上的区别

当在模板中使用 ref 类型的数据时，Vue 会自动为我们添加 .value。例如，如果你在模板中引用了一个 ref 类型的变量 age，你只需写 {{ age }}，而不需要写 {{ age.value }}。这是因为 Vue 在解析模板时会自动检测数据是否为 ref 类型，并相应地处理。

相比之下，当在模板中使用 reactive 类型的数据时，Vue 不会自动添加 .value。因此，你需要手动指定 {{ age.value }} 来访问数据。这表明 reactive 类型的数据需要显式地处理其嵌套属性。

2. Vue 的内部机制

Vue 在解析数据时会检查数据是否为 ref 类型。这一过程通过检查数据的 __v_ref 属性来完成。如果该属性存在且值为 true，则认为数据是 ref 类型的，Vue 将自动为其添加 .value。如果不是 ref 类型的数据，Vue 就不会进行这种处理。

3. 示例代码

ref 类型的数据

在这个例子中，点击“修改年龄”按钮后，页面显示的年龄会变为 666。注意，模板中直接使用 {{ age }} 而不是 {{ age.value }}，因为 Vue 自动处理了 .value。

reactive 类型的数据

在这个例子中，点击“修改年龄”按钮后，页面显示的年龄仍然需要通过 {{ age.value }} 访问，因为它是 reactive 类型的数据。

4. 判断数据类型

你可以使用 Vue 提供的 isRef 和 isReactive 方法来判断一个数据是 ref 还是 reactive 类型的。

扩展知识点：Vue3 中 reactive 和 ref 的对比

数据定义角度：

• ref 通常用于定义基本类型的数据（如数字、字符串等）。


• reactive 用于定义复杂类型的数据（如对象、数组等）。


• 虽然 ref 也可以定义对象或数组类型的数据，但它内部会自动通过 reactive 转换为代理对象。

原理角度：

• ref 通过 Object.defineProperty() 的 get 和 set 方法实现响应式。


• reactive 通过 Proxy 实现响应式，并利用 Reflect 操作源对象内部的数据。

使用角度：

• ref 定义的数据：操作数据需要使用 .value，但在模板中直接读取数据时不需要 .value。


• reactive 定义的数据：无论是操作数据还是读取数据，均不需要使用 .value。