Vue3中ref、reactive、toRef、toRefs区别

在Vue3中，ref、reactive、toRef和toRefs是用于创建和管理响应式数据的核心API，它们的区别如下：

1. ref

• 用途：为基本类型或对象创建响应式引用。
• 特点：
  • 通过.value访问或修改值。
  • 在模板中自动解包，无需.value。
  • 可以处理任意类型（基本类型、对象、数组），对象内部会调用reactive。
• 示例：

  const count = ref(0);
  count.value = 1; // 修改值
  
  const obj = ref({ foo: 1 });
  obj.value.foo = 2; // 自动调用reactive处理对象
  

2. reactive

• 用途：为对象或数组创建深层响应式代理。
• 特点：
  • 直接访问或修改属性，无需.value。
  • 仅支持对象类型（包括数组），对基本类型无效。
  • 嵌套对象也会被递归响应化。
• 示例：

  const state = reactive({ count: 0, nested: { foo: 1 } });
  state.count++; // 直接修改
  state.nested.foo = 2; // 深层响应
  

3. toRef

• 用途：将响应式对象的某个属性转换为独立的ref，保持与源属性的引用关联。
• 特点：
  • 修改ref或源属性会互相触发更新。
  • 适用于需要长期追踪某个属性的场景。
• 示例：

  const state = reactive({ foo: 1 });
  const fooRef = toRef(state, 'foo');
  fooRef.value = 2; // 修改会同步到state.foo
  state.foo = 3;    // 修改也会同步到fooRef.value
  

4. toRefs

• 用途：将响应式对象的所有属性转换为普通对象，每个属性都是ref。
• 特点：
  • 用于解构或展开响应式对象时保留响应性。
  • 常用于setup()返回，确保模板中直接使用属性名。
• 示例：

  const state = reactive({ foo: 1, bar: 2 });
  const stateRefs = toRefs(state); // { foo: Ref<1>, bar: Ref<2> }
  
  // 在setup()中返回，模板可直接使用foo和bar
  return { ...stateRefs };
  

对比总结

使用建议

• 简单值：使用ref（如字符串、数字）。
• 复杂对象：使用reactive，结合toRefs解构返回。
• 组合逻辑：用toRef和toRefs保持响应性，避免解构丢失响应。

// 组合函数示例
function useFeature() {
  const state = reactive({ x: 0, y: 0 });
  return toRefs(state); // 返回{ x: Ref<0>, y: Ref<0> }
}

// 使用
const { x, y } = useFeature(); // 解构后仍为响应式