ref、reactive、toRef、toRefs的区别

1、ref: 为数据添加响应式状态，返回一个具有响应式状态的副本。setup要通过'.value'属性来获取，template则会自动带入.value 比如：

const count = ref<number>(1);
console.log('count.value :>> ', count.value); // 1

由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了.同样返回一个具有响应式状态的副本。

2、reactive：为对象数据添加响应式状态，同样返回一个具有响应式状态的副本。

3、toRef ：将某个对象中的属性变成响应式数据,，toRef的本质是引用，与原始数据有关联

    *toRef的本质是引用关系，修改响应式数据会影响原始数据，toRef当数据发生改变是，界面不会自动更新

4、toRefs： 和toRef的区别类似与reactive和ref,可以理解成批量包装 props 对象,用于将响应式对象转换为结果对象，它会遍历对象身上的所有属性，然后挨个调用toRef执行,其中结果对象的每个属性都是指向原始对象相应属性的ref:

我们在使用reactive 的时候，在template模板里需要用对象店方法的形式绑定数据：

这样绑定就很麻烦乐，如果在return里面使用解构方式，比如 return {...a} 会发现没有办法做到响应式，但是可以使用toRefs: 
(在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题)

发现一个更为全面的文章：
ref、reactive、toRef、toRefs的区别