Object.defineProperty问题

  • Object.defineProperty() 无法监控到数组下标的变化。vue只能通过以下几种方法来监听
pop()
shift()
unshift()
splice()
sort()
reverse()

以上几种方法也是经过vue内部处理后才能监听的。

  • 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历

Proxy

特点:

  • 可以劫持整个对象,并返回一个新对象
  • 有13种劫持操作
  • Proxy是es6提供的,兼容性不好,无法用polyfill磨平

Proxy使用:

es6提供proxy构造函数,第一个参数target:是所要代理的目标对象,可以是空对象。第二个handler是拦截器,一个拦截器可以有多个拦截操作

所有的对target的操作都落在proxy上了。

拦截操作一共有13个

更多拦截操作信息>>

Reflect

反射:通过类的类类型来操作类的属性。包含来对象语言内部的方法,一共有13种,和proxy一一对应,如果在Proxy中调用Reflect的话,其实对应的就是默认行为。

Proxy的this指向

虽然 Proxy 可以代理针对目标对象的访问, 但它不是目标对象的透明代理,即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的this关键字会指向 Proxy 代理。

Object.defineProperty和proxy的更多相关文章

  1. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  2. Vue 的响应式原理中 Object.defineProperty 有什么缺陷?

    Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历.Proxy可以劫持整个对象,并返回一个新的对象. Proxy不仅 ...

  3. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  4. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

  5. est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy

    Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...

  6. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...

  7. Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)

    什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...

  8. Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?

    Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应: Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性 ...

  9. Object.defineProperties()与Proxy对象代理

    Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...

随机推荐

  1. SAP ABAP RFC接口通用日志工具:abap fm logger

    很早之前就想写个能记录函数模块日志的通用工具,最早尝试时,没有想清楚插入代码的体积问题.在一些群友的提醒下,了解到可以用宏来处理这一问题.不过当时比较忙,就没有动笔.最近又想起这件事,花了2天完成了一 ...

  2. 有了MDL锁视图,业务死锁从此一目了然

    摘要:MDL锁视图让一线运维人员清晰地查看数据库各session持有和等待的元数据锁信息,从而找出数据库MDL锁等待的根因,准确地进行下一步决策. 当多用户共同存取数据时,数据库中就会产生多个事务同时 ...

  3. 水滴app

    在选择了软件工程专业之后,指导教师也让我们参加到了学长学姐的作业之中来,使用学长学姐们的软件并写出自己的使用评价以及自己的一些小评价. 这体验的是第三十二组学长们的软件,他们的队名是自然选择,他们做的 ...

  4. 《MySQL数据库》MySQL主从复制搭建与原理

    前言 主从复制:两台或者更多的数据库实例,通过二进制日志,实现数据同步.为什么需要主从复制,主从复制的作用是什么,答:为了预防灾难. 搭建 第一步:准备多实例环境.如何创建多实例见: 第二步:确保每一 ...

  5. 深入探究.Net Core Configuration读取配置的优先级

    前言     在之前的文章.Net Core Configuration源码探究一文中我们曾解读过Configuration的工作原理,也.Net Core Configuration Etcd数据源 ...

  6. 工作不到一年,做出了100k系统,老板给我升职加薪

    看了下自己上一次发技术文还是在6月15日,算了算也是两个来月了.别怕,短暂的离开,是为了更好的相遇. 来到新公司以后啊,发现公司的搜索业务是真的太多了,大大小小有几百个搜索业务.来了之后得先梳理.熟悉 ...

  7. Blazor带我重玩前端(五)

    概述 本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...

  8. WebRTC的VAD 过程解读

    摘要: 在上一篇的文档中,分析unimrcp中vad算法的诸多弊端,但是有没有一种更好的算法来取代呢.目前有两种方式 1. GMM   2. DNN. 其中鼎鼎大名的WebRTC VAD就是采用了GM ...

  9. CC2530的ADC采集外部电压

    初窥ZIGBEE 要在zigbee的组网中加入烟雾传感器的模块,所以需要用到cc2530的ADC对传感器输出的模拟信号进行采样.下面是自己对实现用CC2530的ADC采集外部电压的程序过程. 以下是A ...

  10. Charles安装教程

    一, 简介及安装 —,charles的使用 1.1   charles的说明 Charles其实是一款代理服务器,通过过将自己设置成系统(电脑或者浏览器)的网络访问代理服务器,然后截取请求和请求结果达 ...