西北电力建设甘肃工程公司网站wordpress 小程序教程

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

---

一、核心区别

特性	ref	reactive
适用数据类型	所有类型（基本类型、对象、数组）	仅对象或数组（引用类型）
访问数据	通过 .value 访问	直接访问属性（无需 .value）
解构后响应性	保持响应性（需用 toRef/toRefs）	直接解构会丢失响应性
使用场景	基本类型、需要灵活传递的响应式数据	复杂对象/数组的响应式封装
底层实现	包装成 { value: ... } 对象	直接代理整个对象

---

二、具体示例

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';
  

---

四、如何选择？

场景	推荐 API	示例
基本类型数据	ref	const count = ref(0)
复杂对象/数组	reactive	const state = reactive({ ... })
需要解构对象属性	reactive + toRefs	const { x } = toRefs(state)
需要灵活替换整个对象	ref	const data = ref({ ... })

---

五、总结

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