vue响应式原理的实现

响应式实现的原理---如何监控数据的变化：两种方法

Vue 2.x defineProperty(es5)

Vue 3.x Proxy(es6)

语法：Object.defineProperty(参数1，参数2，参数3)

参数1：目标对象

参数2：需要修改或者添加的属性名

参数3：目标对象属性的一些特征（是一个对象）

其中参数3中也有一些参数：

参数1：value：属性值

参数2：writable：对象属性值是否可被修改，true表示允许，false表示不允许

参数3：configurable：对象属性是否可被删除，true为允许，false为不允许

参数4：enumerable：对象属性是否可被枚举（即遍历）

参数5：get()：给一个属性提供getter方法，当访问这个对象的属性值时触发该方法

参数6：set()：给一个属性提供setter方法，当设置这个对象的属性值时触发该方法

这种方式通过下标更改对象属性，或者直接改变数组长度等，就不能检查到是否更改了属性

var obj = {a:1}
object.defineProperty(obj,"wa",{value : 5 })
 var obj = {
        a: 1
    }
    Object.defineProperty(obj, 'wa', {
            //添加一个新属性wa,当检测到wa的值改变时，触发set（）函数，这时在set()函数中给obj的就旧属性a重新赋值
        set(value) {
            obj.a = value;
        }
    })
    obj.wa = 123;
    console.log(obj.a);

可以通过es6的代理（Proxy）来监测，可以对数据改变和数据截取做劫持

Proxy的作用

对于代理模式 Proxy 的作用主要体现在三个方面:

1、 拦截和监视外部对对象的访问

2、 降低函数或类的复杂度

3、 在复杂操作前对操作进行校验或对所需资源进行管理

var obj = {
        a: 1
    }
    var pa = new Proxy(obj, {
        set(target, property, value) {
            console.log(target, property, value)
            target[property] = value;
        }, get(target, property) {
            alert("获取到了obj的a值")
            return target[property];
        }
    })
    pa.a = 12345

//pa代理了obj 也就是pa拦截了目标对象obj的访问。所有访问obj属性的操作都被get()函数拦截，

所有设置属性都被set()函数拦截，所以，handle就是一个拦截处理函数，必须使用pa（代理对象）代理才能生效，

    console.log(pa.a);

代理的作用就是拦截监控外部对对象的访问