Vue3中如何正确使用`ref`和`reactive`来创建响应式数据？

Vue3中如何正确使用ref和reactive来创建响应式数据？

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

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

示例代码：

import { ref, reactive } from 'vue'

// 使用 ref 定义基本类型
const count = ref(0)
count.value++ // 必须使用 .value 修改

// 使用 ref 定义对象（也可以，但推荐用 reactive）
const userRef = ref({ name: 'Alice', age: 25 })
userRef.value.age = 26 // 注意要 .value

// 使用 reactive 定义对象
const user = reactive({ name: 'Bob', age: 30 })
user.age = 31 // 直接操作，无需 .value

解析：

• ref 内部其实是通过 reactive 包装成 { value: ... } 的对象实现的，因此即使传入对象，ref 也会调用 reactive 转换。
• 在 <template> 中，ref 会被自动解包，所以模板中写 {{ count }} 即可，不用 {{ count.value }}。
• reactive 对基本类型无效，且对对象的响应式是深层的。
• 注意：如果对 reactive 创建的对象进行整体替换（如 user = {}），会失去响应性；而 ref 可以安全地替换整个值（如 userRef.value = {}）。

因此，建议：

• 基本类型 → ref
• 对象/数组 → reactive（更直观），或仍用 ref（便于后续替换整个对象）