一、reactive
reactive方法根据传入的对象，创建返回一个深度响应式对象（proxy代理对象）。
reactive 会对传入对象进行包裹，创建一个该对象的Proxy代理对象。它是源对象的响应式副本，不等于原始对象。它==“深层”==转换了源对象的所有嵌套property（属性） ，解包并维持其中的任何ref引用关系。
响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属性也会触发响应式。
二、ref
ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数，作为这个 ref 对象 内部的 value property 的值。
生成值类型数据（
String，Number，Boolean，Symbol）的响应式对象-
可以用
ref对象.value访问或更改这个值。立即学习“前端免费学习笔记（深入）”；
生成对象和数组类型的响应式对象 （对象和数组一般不选用ref方式，而选用reactive方式，比较便捷）
三、reactive对比ref
-
从定义数据角度对比：
ref用来定义：任意数据类型
reactive用来定义：对象（或数组）类型数据
如何选择 ref 和 reactive？建议：
基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref
引用类型值(Object、Array)使用 reactive
-
从原理角度对比：
ref通过
Object.defineProperty()的get和set来实现响应式（数据劫持）。reactive通过使用
Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
-
从使用角度对比：
- ref定义的数据：访问或更改数据需要
.value - reactive定义的数据：操作数据与读取数据均不需要
.value。
- ref定义的数据：访问或更改数据需要
四、toRef
针对一个响应式对象（reactive封装）的prop（属性）创建一个ref，且保持响应式
两者保持引用关系
语法：const 属性名= toRef(对象,'属性名')
五、toRefs
toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
将响应式对象（reactive封装）转成普通对象
对象的每个属性(Prop)都是对应的ref
两者保持引用关系
语法：const 属性名= toRefs(对象,'属性名')
注意：reactive封装的响应式对象，不要直接通过解构的方式return，这是不具有响应式的。
可以通过 toRefs 处理，然后再解构返回，这样才具有响应式
const state = reactive({
age: 20,
name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。六、一些问题
为什么有了reactive函数还需要ref函数呢？
当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，它都有。
记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})
【相关推荐：vue.js视频教程】
