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. 牛客网PAT练兵场-跟奥巴马一起编程

    题目地址: 题意:无 /** * *作者:Ycute *时间:2019-11-14-21.29.07 *题目题意简单描述:模拟题输出 */ #include<iostream> #incl ...

  2. 简单易懂的JS继承图解

    JS继承的实现方式一共有八种.下面我们来一个一个瞅一下.注意️:文章依据个人理解,难免有问题,还望各位及时指出!!!!! 原型链继承 借用构造函数继承 组合继承 原型式继承 寄生继承 寄生组合式继承 ...

  3. 力扣Leetcode 560. 和为K的子数组

    和为K的子数组 给定一个整数数组和一个整数 k,你需要找到该数组中和为 k 的连续的子数组的个数. 示例 : 输入:nums = [1,1,1], k = 2 输出: 2 , [1,1] 与 [1,1 ...

  4. 【译】ASP.NET Core updates in .NET 5 Preview 8

    .NET 5 预览版 8 现在已经可以获取了,并且已经准备好接受评估.下面列出了本次发布的新特性: 使用 Microsoft.Identity.Web 进行 Azure Active Director ...

  5. wampserver64 apache2.4版本局域网互相访问总结

    wampserver64  apache2.4版本局域网互相访问总结 背景:在我的电脑上给算法组开发了一个工具,需要在局域网环境下其他同事都能访问到,搞了一下午终于搞定,于是整理了这篇文档,给其他同行 ...

  6. Android-PullToRefresh上拉下拉刷新加载更多,以及gridview刷新功能的Library下载地址

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 首先大家应该都听说过此开源框架的强大之处,支持单列以及双列的 上拉加载以及下拉刷新功 ...

  7. Python模拟保护和私有成员

    保护成员:以一个下划线开头.Python不会做特殊处理 私有成员:以两个下划线开头.Python会做mangling

  8. Google Code Jam 2020 Round1B Blindfolded Bullseye

    总结 这一题是道交互题,平时写的不多,没啥调试经验,GYM上遇到了少说交个十几发.一开始很快的想出了恰烂分的方法,但是没有着急写,果然很快就又把Test Set3的方法想到了,但是想到归想到,调了快一 ...

  9. openresty(nginx+lua)初识

    1.新增项目配置文件: vim /usr/example/example1.conf --将以下内容加入example1.conf server { listen 80; server_name _; ...

  10. Mysql慢查询(分析工具)

    慢查询分析工具[mysqldumpslow] 常用的慢查询日志分析工具 汇总除查询条件外其他完全相同的SQL,并将分析结果按照参数中所指定的顺序输出 语法: mysqldumpslow -s r -t ...