一、reactive 创建的响应式对象解构后为什么会失去响应式
Vue 拥有一个响应式系统，可以让它在数据更新的时候自动进行视图的更新。在Vue3.0中，可以使用 reactive 声明响应式状态。文档说不要解构 reactive 创建的响应式对象，为什么？因为会失去响应式的功能，那为什么会失去，我们就来简单研究下。
1、进入reactive方法：
可以看到它在内部调用了createReactiveObject方法，这名字很好理解就是创建响应式对象，调试进去：
它在这里做了一些处理，细节暂时不探究，重点在这：
创建了一个代理对象将其保存在内部并返回，学习Vue3或多或少都听过Vue3如何进行数据视图更新的，Proxy对数据进行了拦截，当数据发生变化，通知Vue进行视图变化。
可以看出 reactive 方法其实就是创建了一个Proxy对象，以及进行了一系列处理，其中并没有找到它可能会失去响应式的情况，也就是说它失去响应式不在于Vue而是在于Proxy对象本身，那么可以简化一下。
2、Proxy 解构
（1）Proxy 解构基本对象
const obj = {
count: 1
};
const proxy = new Proxy(obj, {
get(target, key, receiver) {
console.log("这里是get");
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log("这里是set");
return Reflect.set(target, key, value, receiver);
}
});
我们可以看到不解构的话，count 赋值 2 可以做到响应式更改。而解构赋值，count 就是 5 ，proxy 还是 { count: 2 }
是因为解构相当于重新赋值给另一个变量的原因吗，也就是说它变成了一个新值。
（2）Proxy 解构嵌套对象：我们再看下嵌套对象
const obj = {
a: {
count: 1
}
};
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
console.log("这里是get");
if (typeof target[key] === "object") {
return reactive(target[key]);
};
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log("这里是set");
return Reflect.set(target, key, value, receiver);
}
});
};
const proxy = reactive(obj);
（1）直接赋值：proxy 有响应变化
（2）解构一次：proxy 也有响应变化
（3）解构2次到底：proxy 不再响应变化
（4）总结原因：为什么会不同，其实很好理解，只解构一次，其实新的对象的 count 仍然是被代理的，
而解构两次，直接获取了count，相当于绕过了代理 a，直接拿到基本类型的值。
那么就很好理解了，解构为什么会失去响应，用这个图就可以解释:
因为解构赋值相当于直接跳过了代理那一层，在下面直接获取值，所以 get 和 set 无法被调用。
二、ref 和 reactive + toRefs 响应式实现原理
对于基本数据类型，函数传递或者对象解构时，会丢失原始数据的引用。换言之，我们没法让基本数据类型，或者解构后的变量（如果它的值也是基本数据类型的话），成为响应式的数据。
我们没办法让 a 或 x 这样的基本数据类型成为响应式的数据的，Proxy 也无法劫持基本数据。
但是有时候，我们确实就是想一个数字、一个字符串是响应式的，或者就是想利用解构的写法。那怎么办呢？只能通过创建一个对象，也即是源码中的 Ref 数据，然后将原始数据保存在 Ref 的属性value当中，再将它的引用返回给使用者。
既然是我们自己创造出来的对象，也就没必要使用 Proxy 再做代理了，直接劫持这个 value 的 get/set 即可，这就是 ref 函数与 Ref 类型的由来。
不过单靠 ref 还没法解决对象解构的问题，它只是将基本数据保持在一个对象的 value 中，以实现数据响应式。对于对象的解构还需要另外一个函数：toRefs。通过遍历对象，将每个属性值都转成 Ref 数据，这样解构出来的还是 Ref 数据，自然就保持了响应式数据的引用。