先，我们要知道的是ref、reactive、toRef、toRefs都属于VUE3中Composition API的新特性。
响应式是什么意思？
响应式是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
ref
我们先理解一下最简单的ref。
ref就是把string、Number、Boolean、Symbol类型的数据添加响应式
接受一个原始值，返回一个具有响应式的对象，具有value属性。他的值就是传递的原始值。
修改的话直接修改 xx.value
源数据的值不会被更改，并且数据变化会立马改变HTML
reactive
理解完ref,再来理解一下和ref相对应的reactive
reactive也很好理解，就是传入对象，把传入的对象变成响应式的对象。增删改查和深度的增删改查都会触发响应式从而改变视图。
但是响应式的对象值改变了，原有的数据也会被改变。HTML视图也会实时更改
顺便说一下ref,也可以接收对象。源码会自动判断传入的值，如果是对象会自动变成reactive包裹。
更新一点小内容：关于reactive如果维护相关
实际使用中，无法像ref直接使用xx.vule 修改值
修改reactive的值
修改数组 ：1.使用push方法，增加数据。2.使用splice来删除某条数据。3.使用xx.length来清空数据（推荐）/使用遍历数据方法清空数组 。注意，数组方法种=[]清空方式不适合用语清空reactive值。但是可以用来请清空下面children的值
修改对象：1.直接赋值修改。例如 xx.name=mika
toRef
toRef是用来给抽离响应式对象（被reactive包裹的对象）中的某一个属性的，并且把这个属性包裹成ref对象，使其和原对象产生链接。
或许有人就回有人有疑问了？这个toRef存在有什么意义呢？因为我们知道reactive包裹的东西其实已经有了响应式了，再用toRef什么意义呢？
如图：我们如果要单独把对象中的某个值拿出来，如果直接赋值，会断掉响应式（people3）。就算后面people.name的名字改了，但是因为断掉了响应式，输出的还是原有的名字。
而使用toRef会保持对其源 property 的响应式连接。
并且响应是互相的，数据源数据也会被更改
数据会实时更新到HTML视图上（这里会更新到html视图主要还是因为是reactive包裹了，为什么这么说，我最后有提到）
有人又会问了，那如果说toRef只是把这个响应式对象的属性包裹成ref对象，那我直接用ref这个对象不就可以了吗？何必要用toRef呢。
答：ref是不会去更改原数据的，ref本质是拷贝原数据，而toRef会修改原数据！！
实际使用就看自己的了~
toRefs
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref*。
这句官方定义我都读了很久没太懂啥玩意儿啊？别怕，我给你解释一下
批量版的toRef
toRef不是只能对象中的一个属性嘛，这个可以直接给你整个对象的属性都一起给整成ref。
和toRef的区别，在使用的时候注意要加上xxx.属性名.value
总结：toRefs和toRef没啥区别，就是批量和单个的区别。也是相互响应
关于ref、reactive和toRef、toRefs的区别
ref、reactive数据更新后立马会更新HTML视图。
toRef、toRefs更新会后会等下次更新视图的时候更新视图
setup() {
let people = reactive({ name: "mika", age: "22" });
let people2 = toRef({ name: "我是变之前的2" }, "name");
let people3 = toRefs({ name: "我是变之前的3" });
const refsclick = () => {
people.name = "我来证明你们变了";
console.log(people.name);
console.log(people2.value);
console.log(people3.name.value);
setTimeout(() => {
people.name = "我来证明你们变了";
people2.value = "我是变之后的2";
people3.name.value = "我是变之后的3";
console.log("--修改后--");
console.log(people.name);
console.log(people2.value);
console.log(people3.name.value);
}, 1000);
};
return { refsclick, people, people2, people3 };
},
变化之前的效果:
点击后变化之后的输出和效果：
可以看出来，即使数据已经变化了，但是视图是没有变化的。
然后我把
people.name = "我来证明你们变了";放到setTimeout里面
总结：
如果利用toRef、toRefs将某一个对象中的属性变成了响应式的数据(reactive、ref包裹的数据)
我们修改响应式的数据是会影响原始数据的
如果数据是通过toRef创建的，修改值后，数据不会触发视图，会等下次更新视图的时候一起更新
以上，差不多应该能搞懂这几个api了。如有什么问题请留言~
