：从 `reactive` 对象中解构变量会失去响应性，此时应使用 `toRefs` 来保持响应性： ```javascript const { name } = toRefs(state) ``` 4. **适用场景建议**： - 简单变量 → `ref` - 对象/复杂状态 → `reactive` - 组合式函数返回多个响应式变量 → 推荐使用 `ref` 或配合 `toRefs` 掌握两者的差异有助于写出更清晰、高效的 Vue 3 响应式代码。

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

回答：

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

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

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

示例代码：

import { ref, reactive } from 'vue'

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

// 使用 reactive
const state = reactive({
  name: 'Vue',
  version: 3
})
console.log(state.name)  // 直接访问
state.name = 'Vue 3'     // 直接修改

解析：

1. 本质区别：ref 内部其实是通过 reactive 实现的，ref(value) 相当于 reactive({ value: value })，只是多了一层包装以便支持基本类型。
2. 模板中自动解包：在模板中使用 ref 时，Vue 会自动读取 .value，所以可以直接写 {{ count }} 而不是 {{ count.value }}。
3. 解构问题：从 reactive 对象中解构变量会失去响应性，此时应使用 toRefs 来保持响应性：

   const { name } = toRefs(state)
   

4. 适用场景建议：
   • 简单变量 → ref
   • 对象/复杂状态 → reactive
   • 组合式函数返回多个响应式变量 → 推荐使用 ref 或配合 toRefs

掌握两者的差异有助于写出更清晰、高效的 Vue 3 响应式代码。