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. python实现对列表的增删查修操作

    #定义一个空列表 list_demo=[] #1,向列表中插入元素 def append_demo(): #第一种使用append,可以在列表末尾添加一个函数 for i in range(2): l ...

  2. Macbook Pro HDMI 无信号解决办法

    因为CS:GO无法启动的问题,使用过了下面的命令 sudo pmset -a GPUSwitch 0 导致HDMI显示器无信号 输入下面的代码 sudo pmset -a GPUSwitch 1 可以 ...

  3. iOS打电话功能的简单实现

    小功能简介 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话-方法3 创建一个UIWebView来加载URL,拨完后能自动回到原应用 if (_we ...

  4. 题解 洛谷P3799 【妖梦拼木棒】

    一道水题 (还是做了一个小时,我太菜了 基本思路: 题里面说,4根棍子拼成一个正三角形(等边三角形) 若设这四根棍子长度为\(a,b,c,d\)且\(a≥b>c≥d\) 那很容易得到 (真的很容 ...

  5. require exports module.exports

    require 用于引入模块(js文件). JSON.或本地文件 自己写的模块必须是相对路径,省略了node就认为该自定义模块(js文件)是核心模块(内置模块或者第三方模块) node  有模块作用域 ...

  6. Django 入门介绍

    Django介绍 Django框架是PythonWeb三大主流框架之一,以其功能强大全面而受到众多开发者追捧,现如今Django已经更新到3版本,但是并不推荐使用,更多建议使用1版本. Django版 ...

  7. Jmeter 断言-检查点

    1. http请求/添加/断言/响应断言 2. 输入一个返回数据里没有的参数 3.果然报错了 断言的作用是用来查看接口文档里是否有自己想要的数据!

  8. 跟着尚硅谷系统学习Docker-【day02】

    day02-20200714   p9.docker阿里云配置   helloword   拉取镜像-运行-   拉取镜像如果从国外网站拉取辉比较慢,所以需要配置阿里云或者网易云得镜像仓库.   首先 ...

  9. Spring.Net依赖注入(属性注入)学习笔记

    一.前言: Spring.Net是Java开源框架迁移过来的,主要分为 1)依赖注入 2)面向方面编程 3)数据访问抽象 4)Asp.Net扩展 四个模块功能,这里只是简单介绍依赖注入模块功能. 对于 ...

  10. Java中的String字符串及其常用方法

    字符串(String) 文章目录 字符串(String) 直接定义字符串 常用方法 字符串长度 toLowerCase() & toUpperCase()方法 trim()方法去除空格 判空 ...