浅析ref和reactive/toRefs响应式原理及reactive创建的响应式对象解构后失去响应式的原因分析

一、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);