Vue3中如何使用`ref`和`reactive`创建响应式数据？它们有什么区别？

Vue3中如何使用ref和reactive创建响应式数据？它们有什么区别？

回答：

在 Vue 3 中，可以使用 ref 和 reactive 来创建响应式数据：

• ref 用于定义基本类型（如字符串、数字、布尔值）或复杂类型的响应式变量。使用时需要通过 .value 访问或修改其值，在模板中使用时会自动解包。
• reactive 用于定义对象或数组等复杂类型的响应式数据，不能用于基本类型。访问属性时直接使用即可，无需 .value。

示例代码：

import { ref, reactive } from 'vue'

// 使用 ref
const count = ref(0)
console.log(count.value) // 读取值
count.value++            // 修改值

// 使用 reactive
const user = reactive({ name: 'Alice', age: 25 })
console.log(user.name)   // 直接访问
user.age = 30            // 直接修改

解析：

1. ref 的本质是通过一个对象包裹原始值（使其具有 .value 属性），从而实现对基本类型的响应式追踪。
2. reactive 使用 Proxy 对象对整个目标对象进行代理，仅适用于引用类型（对象、数组），对基本类型无效。
3. 在模板中，ref 会被自动解包，因此不需要写 .value，而 reactive 的属性也直接可用。
4. 选择建议：
   • 简单状态或基本类型用 ref；
   • 复杂对象结构推荐用 reactive；
   • 组合式函数（Composition API）中两者常结合使用，ref 更灵活，便于在函数间传递。

注意：reactive 对 ref 有自动深层解包能力，例如将 ref 放入 reactive 对象中时，访问时无需 .value。