Vue3中的ref和reactive有什么区别，分别在什么场景下使用？

Vue3中的ref和reactive有什么区别，分别在什么场景下使用？

回答： ref 和 reactive 是 Vue3 提供的两个用于创建响应式数据的 API，它们的核心区别在于适用的数据类型和使用方式：

• ref 用于定义基本类型（如 string、number、boolean）或单个值的响应式数据。它返回一个带有 .value 属性的 ref 对象，模板中使用时会自动解包，不需要写 .value。
• reactive 用于定义对象或数组类型的响应式数据。它直接返回该对象的响应式代理，不能用于基本类型。

示例代码：

import { ref, reactive } from 'vue'

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

// 使用 reactive
const state = reactive({ count: 0, list: [] })
console.log(state.count) // 直接访问，无需 .value
state.count++            // 直接修改

解析：

1. 本质差异：

   • ref 内部通过 reactive 实现，实际上是对 { value: ... } 这样的对象进行 reactive 包装。
   • reactive 使用 ES6 的 Proxy 对整个对象进行代理，因此只适用于引用类型。

2. 使用场景建议：

   • 使用 ref：当你需要响应式的基本类型变量，或者在组合式函数（composables）中返回一个响应式变量时（因为 ref 在返回时能保持响应性）。
   • 使用 reactive：当你有一个复杂对象，包含多个字段，且希望整体管理其响应性时。

3. 注意事项：

   • 不要对 reactive 的解构赋值，会丢失响应性：

     const { count } = state // ❌ 解构后不再是响应式
     

   • 可以使用 toRefs 来安全解构：

     const { count } = toRefs(state) // ✅ 保持响应性
     

总结：ref 更灵活，适合基础类型和返回值；reactive 更适合处理对象状态，语法更简洁，但有使用限制。合理选择可以提升代码可读性和维护性。