Vue 3 中 ref 与 reactive 的对比

Vue 3 中 ref 与 reactive 的对比

---

在 Vue 3 中，ref 和 reactive 都是用于创建响应式数据的方法，但它们在使用方式、应用场景等方面存在一些差异，以下是详细对比：

---

一、定义和基本使用

ref

• 定义：ref 用于创建一个响应式的引用对象，它可以包裹任何类型的值，包括基本数据类型（如数字、字符串、布尔值等）和对象。
• 基本使用：通过 ref 函数创建一个响应式引用，使用时需要通过 .value 来访问和修改其值。

import { ref } from 'vue'; 
 
const count = ref(0); 
// 访问值 
console.log(count.value); 
// 修改值 
count.value = 1; 

reactive

• 定义：reactive 用于创建一个响应式对象，它只能接受一个普通对象作为参数，并返回该对象的响应式代理。
• 基本使用：直接使用 reactive 函数将一个普通对象转换为响应式对象，访问和修改其属性时无需额外的 .value。

import { reactive } from 'vue'; 
 
const state = reactive({ 
  name: 'John', 
  age: 30 
}); 
// 访问属性 
console.log(state.name); 
// 修改属性 
state.age = 31; 

二、响应式原理

ref

• ref 是基于 Object.defineProperty() 或 Proxy（取决于运行环境）实现的。它将传入的值包装在一个对象中，并通过 getter 和 setter 来实现响应式。当值发生变化时，Vue 会自动更新与之绑定的 DOM。

reactive

• reactive 是基于 Proxy 实现的。它会创建一个对象的代理，拦截对象的属性访问和修改操作，从而实现响应式。这意味着 reactive 可以对对象的深层属性进行响应式追踪。

三、适用场景

ref

• 基本数据类型：当需要创建响应式的基本数据类型时，ref 是首选。因为基本数据类型不是对象，无法直接使用 reactive。
• 模板中使用：在模板中使用 ref 时，Vue 会自动解包 .value，可以直接使用 {{ count }} 来显示值。
• 与外部库集成：在与一些需要原始值的外部库集成时，ref 可以方便地提供原始值。

reactive

• 复杂对象：当需要创建响应式的复杂对象时，reactive 更为合适。它可以直接处理对象的属性，无需额外的 .value 操作。
• 对象嵌套：对于嵌套对象，reactive 可以自动处理深层属性的响应式，无需手动为每个嵌套对象创建 ref。

四、注意事项

ref

• 解构赋值：对 ref 进行解构赋值会失去响应式。如果需要解构 ref 并保持响应式，可以使用 toRefs 函数。

import { ref, toRefs } from 'vue'; 
 
const state = ref({ 
  name: 'John', 
  age: 30 
}); 
// 解构后失去响应式 
const { name, age } = state.value; 
// 使用 toRefs 保持响应式 
const { name, age } = toRefs(state.value); 

reactive

• 对象替换：不能直接将 reactive 对象替换为另一个对象，否则会失去响应式。如果需要替换对象，可以使用 reactive 重新创建一个响应式对象。

import { reactive } from 'vue'; 
 
const state = reactive({
  name: 'John', 
  age: 30 
}); 
// 错误：失去响应式 
state = reactive({ 
  name: 'Jane', 
  age: 25 
}); 

综上所述，ref 和 reactive 在 Vue 3 中都有各自的优势和适用场景，开发者可以根据具体需求选择合适的方法来创建响应式数据。