Vue 3 中的 ref 和 reactive 有什么区别？在什么场景下应该使用哪一个？

Vue 3 中的 ref 和 reactive 有什么区别？在什么场景下应该使用哪一个？

回答：
ref 和 reactive 是 Vue 3 Composition API 中用于创建响应式数据的两个核心函数，它们的主要区别如下：

1. 数据类型支持不同：

   • ref 可以用于基本类型（如 string、number、boolean）和对象。对于基本类型，ref 会将其包装在一个具有 .value 属性的对象中。
   • reactive 只能用于对象（包括数组、普通对象等），它通过 Proxy 对对象进行深层响应式处理。

2. 访问方式不同：

   • 使用 ref 创建的变量在 script 中访问或修改时需要通过 .value（例如 count.value++），但在模板中 Vue 会自动解包，无需写 .value。
   • reactive 返回的是一个响应式代理对象，直接通过属性访问即可（如 state.count），无需 .value。

3. 替换性与灵活性：

   • ref 可以被整体替换（如 myRef = ref(10)），而 reactive 对象不能被整体替换，否则会失去响应性。
   • 如果你需要将响应式数据作为 props 传递或在组合函数中返回，通常推荐使用 ref，因为它更灵活且兼容性更好。

使用建议：

• 当处理基本类型或希望获得更高的灵活性（比如在组合函数中返回单个值）时，使用 ref。
• 当处理复杂对象结构（如表单状态、配置对象）且不需要整体替换该对象时，使用 reactive 更简洁。

示例：

import { ref, reactive } from 'vue'

// 使用 ref
const count = ref(0)
count.value++ // 在 script 中需 .value

// 使用 reactive
const state = reactive({
  name: 'Alice',
  age: 25
})
state.age++ // 直接访问属性

总结：两者底层都基于相同的响应式系统，选择哪个主要取决于数据类型和使用场景。官方也建议：如果不确定，优先使用 ref，因为它的适用范围更广且行为更一致。