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:},
b:,
d:[,,,]
};
function update() {
console.log('更新视图')
};
let p = new Proxy(obj,handler);
obj.c=;
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 }

 

Proxy + Reflect 实现 响应的数据变化的更多相关文章

  1. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  2. Proxy监听对象的数据变化,处理绑定数据很有用

    Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. }; //interceptor 拦截 var ...

  3. Vue2手写源码---响应式数据的变化

    响应式数据变化 数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast ...

  4. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  5. 【Go】优雅的读取http请求或响应的数据-续

    原文链接:https://blog.thinkeridea.com/201902/go/you_ya_de_du_qu_http_qing_qiu_huo_xiang_ying_de_shu_ju_2 ...

  6. Adapter数据变化改变现有View的实现原理及案例

    首先说说Adapter详细的类的继承关系.例如以下图 Adapte为接口它的实现类的对象作为AdapterView和View的桥梁,Adapter是装载了View(比方ListView和girdVie ...

  7. Vue实现双向绑定的原理以及响应式数据

    一.vue中的响应式属性 Vue中的数据实现响应式绑定 1.对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集 ...

  8. 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

    https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...

  9. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

随机推荐

  1. 如何设置linux bash终端的字符显示内容和颜色?

    通常linux有1-6个字符终端 tty, 有1个图形终端. 通常用 ctrl+alt+f1 到f6是字符终端, ctrl+alt+f7为图形终端, 但是, 也有不一样的, 如: fedora的4.0 ...

  2. Redis存储对象序列化和反序列化

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInpu ...

  3. 【HBase】五、HBase的Java接口

      HBase是Hadoop中的一个重要组件,自然也是基于Java语言开发的,因此HBase有很好的Java接口供程序员调用,通过一个例子来演示java如何使用HBase数据库.   要想在HBase ...

  4. 初学node.js-nodejs中实现用户注册路由

    经过前面几次的学习,已经可以做下小功能,今天要实现的事用户注册路由. 一.users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), S ...

  5. 在linux服务器上自动备份数据库

    脚本如下,没有任何问题: # !/usr/bin/pythonimport osimport timeimport datetimeimport pipesimport glob DB_HOST = ...

  6. Python中的sorted函数

    今天在做一个中文文本分类的项目,遇到了一个sorted函数,发现并不会用... 记录一下: sorted(list, key, reverse) list是给定的列表: key是排序过程调用的函数,也 ...

  7. python基础--函数1

    # 一,为什么使用函数 # 1,可以使代码的组织结构清晰,可读性好 # 2,遇到重复的问题可以直接调用函数 # 3,功能扩展时,可直接修改,而无需每处都进行修改. # 二,函数为何物 # 函数对程序员 ...

  8. 解决react项目中跨域和axios封装使用

    最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装 全局安装create-react-app脚手架 ...

  9. 6-3 如何解析简单的XML文档

    元素节点.元素树 >>> from xml.etree.ElementTree import parse >>> help(parse) Help on funct ...

  10. http协议中常见的状态码以及请求方式,http协议的组成

    请求状态码: 2xxx:表示请求成功,例如200. 3xxx:表示请求被重定向,表示完成请求,需要进一步操作,例如 302. 4xxx:表示请求错误,例如:404,资源没有找到. 5xxx:表示服务器 ...