vue3-proxy代理实现响应式原理&vue2响应式原理区别

Vue2中的响应式原理

实现Vue2响应式是通过Object.defineProperty()来实现的，使用数据劫持的方法。

具体如下：

let obj = {name:'张三',age:18}
        // vue2
        let p = {}
            for(let key in obj){
                Object.defineProperty(p,key,{
                get(){
                    return obj.name
                },
                set(value){
                    obj[key]=value
                }
            })
        }
        
        console.log(p.name); //张三
        p.name='李四'
        console.log(p.name); //李四

此时，p对象就完成了对obj对象的代理，当读取p.name时，实际上是在读取obj.name，当修改p.name时，实际上obj中name属性的值也会随之更新。

但是，在Vue2中，无法通过p对象对obj对象进行增和删的操作，实际上obj对象是捕获不到的，所以即便通过p对象删除和增加属性，obj对象内的属性是不会更新的。
 

Vue3中的响应式原理

实现原理：
通过Proxy（代理）： 拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。

代码如下:

let obj = {name:'张三',age:18}
        const handler = {
            get:function(obj,prop){
                console.log(obj,prop,'get');
                return obj[prop]
            },
            set:function(obj,prop,value){
                console.log(obj,prop,value,'set');
                obj[prop] = value
                return obj
            },
            deleteProperty(obj, prop){
                console.log(obj,prop,'delete'); 
                return  delete target[prop]
            }
        }
        let proxy = new  Proxy(obj,handler)

        console.log(proxy.name); //张三
        proxy.name = '李四'
        console.log(proxy.name); //李四
        delete proxy.name
        console.log(proxy.name); //undefined

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。

参数：
target：
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler：
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

Reffect

Reflect是一个组合的对象，它提供了阻止 JavaScript 操作的方法。Reflect不是一个函数对象，因此它是不可构造的。

在reffect身上，就有defineProperty()这个方法

代码如下:

 let obj = {name:'张三',age:18}
        const handler = {
            get:function(obj,prop){
                return Reflect.get(obj, prop)
            },
            set:function(obj,prop,value){

                return Reflect.set(obj, prop, value)
            },
            deleteProperty(obj, prop){
               
                return  Reflect.deleteProperty(obj, prop)
            }
        }
        let proxy = new  Proxy(obj,handler)

        console.log(proxy.name); //张三
        proxy.name = '李四'
        console.log(proxy.name); //李四
        delete proxy.name
        console.log(proxy.name); //undefined

不管是通过p对象对obj对象进行增删改查任意一种操作，都能监测到，同时数据也能得到更新，对比起Vue2来说，确实真正意义上实现了数据的完全式响应。

而在Vue3数据的更新是proxy配合Reffect来实现的