Proxy + Reflect 实现响应的数据变化

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）

let p = new Proxy(target, handler);

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。

let handler  = {get(target,key) {//如果得到的值是一个对象我们还得再调一次if(typeof target[key]=='object') {return  new  Proxy(target[key],handler)}return Reflect.get(target,key);},set(target,key,value) {if(key==='length') {return  true;}update();return  Reflect.set(target,key,value);}
};
let obj = {a:{a:1},b:2,d:[1,2,3,4]
};
function  update() {console.log('更新视图')
};
let  p = new  Proxy(obj,handler);
obj.c=3;
console.log(obj)

Reflect.get(target,key);   相当于    target{key]

 Reflect.set(target,key,value);   相当于  target[key}= value;

输出：

{ a: { a: 1 }, b: 2, d: [ 1, 2, 3, 4 ], c: 3 }

转载于:https://www.cnblogs.com/guangzhou11/p/11360800.html

Proxy + Reflect 实现响应的数据变化相关推荐

从数组的响应式看下一代响应式数据
随着MVVM框架的广泛使用响应式数据已经变得耳熟能详,现在谈响应式数据好像有点炒冷饭的意思,对!没错!不过这次炒的是蛋炒饭,而且还是加火腿肠的那种.之前看过几个框架的响应式数据实现,貌似都对数组(Ar ...
Vue响应式数据基本讲解（2.0和3.0）
响应式数据一.何为响应式在我们的程序中,总是需要去修改JS变量中的数据,然后使得页面中的内容也跟着变化,如下面的代码 <body><p>姓氏: <span class ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
浏览器及时感知服务端数据变化的方式
需求在公司,有一个需求,是浏览器实时获取服务端数据变化,然后根据变化做相应的动作.需求场景如下:手机端扫描二维码,然后获取待取件订单列表,点击取件,进行取件,同时远端打印机打印出取件小票. 技术难点 ...
微信小程序，实现 watch 属性，监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化目标在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法. 思路 Vue 的 compu ...
HTTP缓存解释为何页面响应的数据和服务端的不一致
HTTP缓存解释为何页面响应的数据和服务端的不一致用途 HTTP缓存主要用在对一些实时性要求不高的静态文件进行的缓存,往往都是存在浏览器端,防止这些"多余"的请求重复的访问服务器 ...
Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
【Go】优雅的读取http请求或响应的数据-续
原文链接:https://blog.thinkeridea.com/201902/go/you_ya_de_du_qu_http_qing_qiu_huo_xiang_ying_de_shu_ju_2 ...
【vue3 Api - watchEffect 的讲解使用】- 侦听响应式数据执行副作用(effect)函数
在了解 `watchEffect` api之前,需要了解在vue中,副作用函数的定义是什么: 字面意义的讲,副作用函数指的是会产生副作用的函数,例如下面该函数: var num = 10 functi ...

Proxy + Reflect 实现响应的数据变化

Proxy + Reflect 实现响应的数据变化相关推荐

最新文章

热门文章

Proxy + Reflect 实现 响应的数据变化

Proxy + Reflect 实现 响应的数据变化相关推荐

最新文章

热门文章

Proxy + Reflect 实现响应的数据变化

Proxy + Reflect 实现响应的数据变化相关推荐