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

在Vue 3中，ref和reactive均用于创建响应式数据，但其适用场景及使用方式存在差异：

核心区别

• ref内部通过reactive包装成{ value: ... }对象实现，本质仍为reactive对象，仅多一层封装。
• reactive通过Proxy代理原对象，仅适用于引用类型（对象、数组），不可直接赋值。

使用场景

1. 基础类型

   • 适用：字符串、数字、布尔值等基本类型
   • 示例：

     const count = ref(0); // 通过.count.value修改值
     

2. 对象/数组

   • 适用：对象或数组类型
   • 示例：

     const state = reactive({ count: 0 }); // 直接修改state.count
     

使用规范

1. 赋值限制

   • reactive不可对整个变量重新赋值（如state = {}），否则会失去响应性。
   • ref可通过.value安全地重新赋值。

2. 解构与响应性

   • 解构reactive对象会丢失响应性，需使用toRefs保持：

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

3. 模板自动解包

   • ref在模板中自动解包，可直接使用{{ count }}，无需显式调用.value。

总结

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