Vue 3 中 ref 与 reactive 的对比
- [Vue 3 中 ref 与 reactive 的对比](#Vue 3 中 ref 与 reactive 的对比)
Vue 3 中 ref 与 reactive 的对比
在 Vue 3 中，ref 和 reactive 都是用于创建响应式数据的方法，但它们在使用方式、应用场景等方面存在一些差异，以下是详细对比：
一、定义和基本使用
ref
- 定义：
ref用于创建一个响应式的引用对象，它可以包裹任何类型的值，包括基本数据类型（如数字、字符串、布尔值等）和对象。 - 基本使用：通过
ref函数创建一个响应式引用，使用时需要通过.value来访问和修改其值。
javascript
import { ref } from 'vue';
const count = ref(0);
// 访问值
console.log(count.value);
// 修改值
count.value = 1; reactive
- 定义：
reactive用于创建一个响应式对象，它只能接受一个普通对象作为参数，并返回该对象的响应式代理。 - 基本使用：直接使用
reactive函数将一个普通对象转换为响应式对象，访问和修改其属性时无需额外的.value。
javascript
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函数。
javascript
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重新创建一个响应式对象。
javascript
import { reactive } from 'vue';
const state = reactive({
name: 'John',
age: 30
});
// 错误：失去响应式
state = reactive({
name: 'Jane',
age: 25
}); 综上所述，ref 和 reactive 在 Vue 3 中都有各自的优势和适用场景，开发者可以根据具体需求选择合适的方法来创建响应式数据。