【web前端】数据响应式

WEB前端开发社区 昨天

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.aobj.a=5obj.b=6delete obj.aobj.c={ d:666};obj.c.d

控制台打印信息

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