使用区别

reactive定义引用数据类型，ref 定义基本类型
reactive定义的变量直接使用，ref 定义的变量使用时需要.value
模板中均可直接使用，vue帮我们判断了是reactive还是ref定义的(通过__v_isRef属性)，从而自动添加了.value。

// 定义
let count = ref(0);
let obj = reactive({a: 1, b: 2});
// 使用
count.value = 1;
menu  = {a: 1, b: 2, c: 3};return {count，...toRefs(menu)
}

ref

ref 用于创建一个简单的响应式数据，即一个基本类型的数据，比如数字、字符串等，它会将这个基本类型数据包装成一个响应式对象，并且返回一个带有.value属性的对象。

这样，我们在对这个响应式对象进行读取或修改时，就可以直接使用.value来访问或修改它的值。

reactive

reactive 用于创建一个复杂的响应式数据，即一个对象或数组。

它会将这个对象或数组的所有属性或元素都转化为响应式数据，并返回一个响应式对象。

我们在对这个响应式对象进行读取或修改时，可以直接使用点操作符或数组下标来访问或修改它的属性或元素。

<template><div><p>count: {{ count.value }}</p><button @click="increment">increment</button><p>person: {{ person.name }}, {{ person.age }}</p><button @click="updatePerson">update person</button></div>
</template><script>
import { ref, reactive } from 'vue';export default {setup() {// 使用 ref 创建一个响应式的基本类型变量const count = ref(0);// 使用 reactive 创建一个响应式的对象const person = reactive({name: 'Alice',age: 20,});// 点击按钮，修改 countconst increment = () => {count.value++;};// 点击按钮，修改 personconst updatePerson = () => {person.name = 'Bob';person.age = 30;};return {count,person,increment,updatePerson,};},
};
</script>