数据响应式

1、概念

​数据响应式，可以说是一套能够侦测到数据变化，从而可以根据这个变化做一些跟变化数据相关处理的机制。比如有一个数据

var obj={
    a:3,
    b:6
}

obj.a 值改为5了，我们可以通过数据响应式，做相关obj.a 值更新逻辑处理；删除obj.b 了，做删除逻辑处理等。

​

2、实现

​现在使用ES6 的 代理 Proxy 和反射 Reflect 简单实现数据的数据响应式

//数据响应式的实现
function reactive(obj){
    return new Proxy(obj,{
        get(target,key){
            let res = Reflect.get(target,key);
            console.log('Proxy.get --> ',key,' --> 侦测到数据被使用')
            return typeof res ==='object' ? reactive(res) : res;
        },
        set(target,key,value){
            let res = Reflect.set(target,key,value);
            console.log('Proxy.set --> ',key,' --> 侦测到数据变化，可以做点什么事情')
            return res;
        },
        deleteProperty(target,key){
            let res = Reflect.deleteProperty(target,key);
            console.log('Proxy.deleteProperty --> ',key,' --> 侦测到数据变化，可以做点什么事情')
            return res;
        }
    })
}

//测试
var obj = reactive({'a':3});
obj.a
obj.a=5
obj.b=6
delete obj.a
obj.c={ d:666};
obj.c.d

控制台打印信息

PS E:\workspace\reactiveDemo> node index
Proxy.get -->  a  --> 侦测到数据被使用
Proxy.set -->  a  --> 侦测到数据变化，可以做点什么事情
Proxy.set -->  b  --> 侦测到数据变化，可以做点什么事情
Proxy.deleteProperty -->  a  --> 侦测到数据变化，可以做点什么事情
Proxy.set -->  c  --> 侦测到数据变化，可以做点什么事情
Proxy.get -->  c  --> 侦测到数据被使用
Proxy.get -->  d  --> 侦测到数据被使用
PS E:\workspace\reactiveDemo>