如何在Vue 3中使用`ref`和`reactive`创建响应式数据？它们之间有何区别？

如何在Vue 3中使用ref和reactive创建响应式数据？它们之间有何区别？

回答：

在 Vue 3 中，可以使用 ref 和 reactive 来创建响应式数据，但它们的使用场景和内部机制有所不同。

1. 使用 ref：

   • 用于定义基本类型（如字符串、数字、布尔值）或对象类型的响应式数据。

   • 使用时需要通过 .value 访问或修改其值（在模板中自动解包）。

   • 示例：

     import { ref, reactive } from 'vue'
     
     const count = ref(0)
     console.log(count.value) // 0
     count.value++
     
     const name = ref('Alice')
     

2. 使用 reactive：

   • 用于定义对象类型的响应式数据。

   • 直接操作属性，无需 .value。

   • 示例：

     const state = reactive({
       name: 'Bob',
       age: 25
     })
     console.log(state.name) // Bob
     state.age++
     

区别解析：

最佳实践建议：

• 使用 ref 定义变量，尤其是组合式函数（composables）中返回响应式状态。
• 使用 reactive 定义结构化的对象状态，但避免解构它。
• 当需要将 reactive 对象的部分属性暴露时，使用 toRefs 来保持响应式。

const state = reactive({ name: 'Tom', age: 30 })
const { name, age } = toRefs(state) // 这样解构后仍保持响应式

这样可以确保在使用组合式 API 时，响应式不会丢失。