ref和reactive区别

Vue 3 中 ref 和 reactive 的区别

在 Vue 3 中，ref 和 reactive 是响应式系统的两个基本 API，它们都用于创建响应式数据，但在使用方式和适用场景上有所不同。

ref

ref 用于创建一个响应式的引用，其参数可以是任何类型的值，包括基本类型（如 String、Number）或对象类型。

• 使用 ref 创建的响应式数据，访问或修改时需要通过 .value 属性。这是因为 ref 实际上创建了一个包含 value 属性的响应式对象。
• ref 更适合用于基本类型数据的响应式，但也可以用于对象。

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的数字，初始值为 0

const user = ref({ name: 'Alice', age: 30 }); // 创建一个响应式的对象

console.log(count.value); // 输出 0

count.value++; // 将 count 的值增加 1

console.log(count.value); // 输出 1

user.value.name = 'Bob'; // 修改 user 对象的 name 属性

console.log(user.value.name); // 输出 'Bob'

reactive

reactive 用于创建一个响应式的对象或数组。它的参数必须是对象或数组，不能是基本类型。

使用 reactive 创建的响应式数据，访问和修改时不需要 .value 属性，可以直接像操作普通对象或数组那样操作。

reactive 提供了更深层次的响应式转换，适用于复杂的对象或数组。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'Bob',
    age: 25,
  },
});

console.log(state.count); // 输出 0

state.count++; // 将 count 的值增加 1

console.log(state.count); // 输出 1

state.user.name = 'Alice'; // 修改 user 对象的 name 属性

console.log(state.user.name); // 输出 'Alice'

主要区别

• 使用场景：ref 适用于基本数据类型和对象，而 reactive 仅适用于对象和数组。
• 访问方式：使用 ref 创建的响应式数据需要通过 .value 访问或修改，而 reactive 创建的响应式对象或数组则像普通对象或数组一样直接操作。
• 响应式深度：reactive 提供深层响应式，意味着对象内部的任何变化都是响应式的。而 ref 用于对象时，对象内部的属性变化也是响应式的，但它更多是作为一个值的容器。

选择 ref 还是 reactive

选择 ref 还是 reactive，主要取决于你的具体需求和使用场景。

• 如果需要创建响应式基本类型数据，或者需要更细粒度的控制，可以使用 ref。
• 如果需要创建响应式对象或数组，并且需要更深层次的响应式，可以使用 reactive。

Donate