携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
其实，在我们刚上手vue3的时候，基本都碰见过这个问题，比如，我们解构props,如果你不注意，或者是为了简便，你直接使用扩展运算符...
const props = defineProps({a:Number,b:Number})
const {a,b} = {...props}
当你第一次使用的时候，没问题，然后你很快会发现，子组件不会变化了，这时候你打印一下props与a就能看到原因：解构时只提取了值，它不再是Proxy,自然无法响应。
在vue3文档中，会告诉你用toRefs解决，那么你知道toRefs是怎么解决的吗？我们大概模拟一下,当然这是我的思路，不一定对.
对于Props来说，组件初始化时就存在,也没有什么多余的副作用函数，我觉得这样实现时没问题的，但是对于其他的reactive变量来说，你无法确定它的副作用函数有多少，因此我这样做还是会丢失响应性。
为了不丢失响应性，我们需要一个指向，把所有对于a的操作指向props.a，这样才能通过reactive结构保证响应性。于是我们开始设计这样一种指向的结构
我们可以发现，无论有多少属性，它们实现的方式基本上一样的，因此我们可以封装出来一个toRef,实现了toRef，我们就可以再去实现一下toRefs
这样我们就基本解决了响应式丢失的问题，同时了解到了为什么会出现这个问题，和解决的思路。当然这只是思路而已，vue3中源代码肯定比这复杂很多。
