使用区别
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,
});
// 点击按钮，修改 count
const increment = () => {
count.value++;
};
// 点击按钮，修改 person
const updatePerson = () => {
person.name = 'Bob';
person.age = 30;
};
return {
count,
person,
increment,
updatePerson,
};
},
};
</script>
