ref reactive使用区别

ref和reactive是Vue.js 3.x版本中新增的响应式API，用于实现组件的数据响应式更新。它们的主要区别如下：

1. ref：
- ref用于创建一个响应式的数据引用，可以将普通的数据类型（如数字、字符串等）转换为响应式数据。
- ref返回一个包装对象，可以通过.value属性访问和修改数据的值。
- ref适用于单个简单的数据，例如数字、字符串等。

2. reactive：
- reactive用于创建一个响应式的数据对象，可以将普通的JavaScript对象转换为响应式对象。
- reactive返回一个Proxy代理对象，可以直接访问和修改数据对象的属性。
- reactive适用于复杂的数据对象，例如对象、数组等。

下面是一个示例演示ref和reactive的使用区别：

import { ref, reactive } from 'vue'

// 使用ref创建响应式数据引用
const count = ref(0)
console.log(count.value) // 输出：0

count.value++ // 修改数据的值
console.log(count.value) // 输出：1

// 使用reactive创建响应式数据对象
const user = reactive({
  name: 'John',
  age: 25
})
console.log(user.name) // 输出：John

user.age++ // 修改数据对象的属性值
console.log(user.age) // 输出：26