教你手把手，手撕vue3中的reactive ref

reactive ref 简单介绍

Vue3.0中提供了两个可以创建响应式对象的函数，那就是 reactive 函数和 ref函数。
ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值。
reactive 则是 修改state.reactiveField的值
简单说说它们的区别。
1.写法不一样 ref偏向单独变量实现 reactive 偏向用对象里添加属性实现
2.ref只可以监听简单数据，reactive可以监听所有数据。
3.修改值时不一样 ref在setup函数中修改需要通过修改 count.value 的值，HTML标签直接使用count
reactive 则是 修改state.reactiveField的值，HTML标签也是使用state.reactiveField，如果想要直接使用.reactiveField不加state，需要借助toRefs进行转换为普通对象
将state返回 例如 return{…toRefs(state)}

reactive

让我们来看看是怎么实现的
大致实现思路:先判断是不是传递过来的参数是不是对象类型，然后进一步判断是数组还是对象，再分别队它们的子元素或子属性遍历看看有没有是对象类型的值，有则再执行ractive一次，没有的话就是其他类型就直接返回一个Proxy对该值进行监听，如果传递的不是对象类型则报错。

下面我们来模拟一些数据，看看能不能实现修改值发生监听

对象类型

后台：

前面四个输出 对象 {} 来源于判断该值为对象进行的操作

中间四个输出 更新UI界面则是 Proxy里面的 因为我们修改了它的值

最后我打印了一下reactive处理后的该对象发现其对该对象中含有的对象类型都被Proxy进行控制且对应值也发生了改变，说明实现成功了。

数组类型

后台输出:

这个传递的数组里既有对象又有数组
前四次中的 1 3 是对数组进行修改触发的

2 4是对对象修改触发的，也就是上面对象类型修改的

中间四次同样是Proxy中修改值时触发的

最后我打印了一下reactive处理后的该数组发现其对该数组中含有的对象类型和数组都被Proxy进行控制且对应值也发生了改变，说明实现成功了。

ref

实现了reactive那么ref久好办了，毕竟ref底层就是基于reactive实现的，我们只需要返回一个我们定义的myReactive然后传递参数时传递一个对象，对象中默认有一个value属性其值也就是传进来的值