Vue3中如何正确使用`ref`和`reactive`来声明响应式数据，它们有什么区别？

Vue3中如何正确使用ref和reactive来声明响应式数据，它们有什么区别？

回答：

在 Vue 3 中，ref 和 reactive 都用于创建响应式数据，但适用场景和使用方式有所不同：

• ref 用于定义基本类型（如字符串、数字、布尔值）或单个值的响应式变量。使用时需要通过 .value 访问或修改其值。在模板中使用时，Vue 会自动解包 .value，无需手动调用。

  示例：

  import { ref } from 'vue'
  const count = ref(0)
  count.value++ // 修改值
  

• reactive 用于定义对象或数组类型的响应式数据。它返回一个响应式的代理对象，直接操作属性即可，不需要 .value。

  示例：

  import { reactive } from 'vue'
  const state = reactive({ count: 0 })
  state.count++ // 直接修改
  

解析：

1. 本质区别：

   • ref 内部其实是通过 reactive 包装成 { value: ... } 对象实现的，所以它本质上也是一个 reactive 对象，只是多了一层包装。
   • reactive 使用 Proxy 对原对象进行代理，因此只能用于引用类型（对象、数组），不能用于基本类型。

2. 使用注意：

   • 使用 reactive 时，不能对整个变量重新赋值（如 state = {}），否则会失去响应性。而 ref 可以通过 .value 安全地重新赋值。
   • 解构 reactive 对象会丢失响应性，例如：const { count } = state，此时 count 不再响应。应使用 toRefs 来保持响应性：

     import { toRefs } from 'vue'
     const { count } = toRefs(state)
     

3. 模板中的自动解包：

   • 在模板中，ref 会被自动解包，可以直接写 {{ count }} 而不是 {{ count.value }}。

总结：

• 基本类型 → 用 ref
• 对象/数组 → 用 reactive（推荐结构复杂时），或仍可用 ref（便于函数返回或传参）
• 组合式函数中返回响应式数据时，ref 更灵活。