ref 主要用于创建单个的响应式数据。reactive 用于创建包含多个响应式属性的对象。
ref:接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
- ref 函数接受的参数数据类型可以是原始数据类型也可以是引用数据类型。
- 在模板中使用 ref 时，我们不需要加 .value，因为当 ref 在模板中作为顶层属性被访问时，它们会被自动解包，但在js中，访问和更新数据都需要加 .value。
<script setup>
import { ref } from 'vue'
const person = {
age: ref(26)
}
const { age } = person //将age变为顶级属性
</script>
<template>
<div class="main">
<p>age: {{ age + 1 }}</p>
</div>
</template>
reactive:reactive 的作用是将一个普通的对象转换成响应式对象。它会递归地将对象的所有属性转换为响应式数据。它返回的是一个 Proxy 对象。
参数：只能是对象或者数组或者像 Map、Set 这样的集合类型
当原始对象里面的数据发生改变时，会影响代理对象；代理对象里面的数据发生变化时，对应的原始数据也会发生变化。
<script setup>
import { reactive } from 'vue'
const obj = {
count: 1
}
const proxy = reactive(obj);
</script>
<template>
<div class="main">
obj.count：<input type="text" v-model="obj.count">
proxy.count：<input type="text" v-model="proxy.count">
<p>obj.count：{{ obj.count }}</p>
<p>proxy.count：{{ proxy.count }}</p>
</div>
</template>
此时只有改变proxy.count输入框内的值，其他都会跟着变化
