ref和reactive区别

在 Vue 3 中，ref 和 reactive 是两种创建响应式数据的主要 API，但它们的适用场景和使用方式有所不同。以下是它们的核心区别和示例：

一、核心区别

二、具体示例

1. ref 的用法

• 适用场景：基本类型数据、需要直接替换整个对象。
• 示例：

  import { ref } from 'vue';
  
  // 基本类型
  const count = ref(0);
  console.log(count.value); // 0
  count.value++; // 修改值
  
  // 对象类型
  const user = ref({ name: 'Alice', age: 25 });
  console.log(user.value.name); // Alice
  user.value.age = 26; // 修改属性
  

2. reactive 的用法

• 适用场景：复杂对象或数组。
• 示例：

  import { reactive } from 'vue';
  
  const state = reactive({
    name: 'Bob',
    scores: [80, 90, 95]
  });
  
  console.log(state.name); // Bob
  state.scores.push(100); // 直接操作数组
  

三、关键注意事项

1. ref 需要 .value，reactive 不需要

• ref 将数据包装在 { value: ... } 对象中，因此需要 .value 访问：

  const num = ref(10);
  console.log(num.value); // 10
  

• reactive 直接代理对象，直接访问属性：

  const obj = reactive({ x: 1 });
  console.log(obj.x); // 1
  

2. 解构响应性

• reactive 解构会丢失响应性：

  const state = reactive({ a: 1, b: 2 });
  const { a, b } = state; // ❌ 解构后 a 和 b 不再是响应式
  

  • 解决方案：使用 toRefs：

    const state = reactive({ a: 1, b: 2 });
    const { a, b } = toRefs(state); // ✅ 保持响应性
    

• ref 解构时需要保持 .value：

  const count = ref(0);
  const { value: countValue } = count; // ✅ 保持响应性
  

3. 替换对象时的差异

• ref 可以直接替换整个对象：

  const user = ref({ name: 'Alice' });
  user.value = { name: 'Bob' }; // ✅ 直接替换
  

• reactive 不能直接替换整个对象：

  const state = reactive({ name: 'Alice' });
  // ❌ 错误！会破坏响应性
  state = { name: 'Bob' };
  // ✅ 正确！修改属性
  state.name = 'Bob';
  

四、如何选择？

五、总结

• ref：更通用，适合基本类型或需要灵活替换的响应式数据，但需要 .value。
• reactive：专为对象/数组设计，直接操作属性更简洁，但无法直接替换整个对象。
• 最佳实践：
  • 优先用 ref 处理基本类型和需要灵活替换的场景。
  • 用 reactive 处理复杂对象，结合 toRefs 解构属性。