ref和reactive是Vue3中用于创建响应式数据的两个基本API。
ref用于创建简单类型的响应式数据，比如字符串、数字、布尔值等。它接收一个初始值并返回一个响应式引用对象，你可以通过.value访问和更新这个值。
reactive用于创建复杂类型的响应式数据，比如对象和数组。它接收一个普通对象或数组，并返回一个响应式代理对象，你可以直接访问和更新这个代理对象的属性和元素。
下面是它们的具体用法和适用场景：
ref
import {
ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
在上面的例子中，我们使用ref函数创建了一个名为count的响应式引用。它的初始值为0，我们可以通过.value访问和更新它的值。
ref适用于创建简单类型的响应式数据，比如数字、字符串、布尔值等。它的主要特点是可以通过.value访问和更新值，语法更加简洁。
reactive
import {
reactive } from 'vue'
const counter = reactive({
count: 0
})
console.log(counter.count) // 0
counter.count++
console.log(counter.count) // 1
在上面的例子中，我们使用reactive函数创建了一个名为counter的响应式代理对象。它有一个名为count的属性，我们可以直接访问和更新这个属性的值。
reactive适用于创建复杂类型的响应式数据，比如对象和数组。它的主要特点是可以直接访问和更新属性和元素，语法更加直观。
总的来说，如果你需要创建简单类型的响应式数据（比如一个计数器），那么使用ref更加方便。如果你需要创建复杂的响应式数据（比如一个包含多个属性的对象），那么使用reactive更加合适。同时，如果你在template中需要访问数据，则可以使用ref和shallowRef创建响应式数据，并通过toRefs将引用转为响应式对象；而如果你在setup中访问数据，那么可以直接创建reactive对象。