Object.defineProperty和proxy
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的更多相关文章
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- Vue 的响应式原理中 Object.defineProperty 有什么缺陷?
Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历.Proxy可以劫持整个对象,并返回一个新的对象. Proxy不仅 ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy
Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...
- 双向绑定Proxy VS Object.defineProperty
Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...
- Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)
什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...
- Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?
Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应: Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性 ...
- Object.defineProperties()与Proxy对象代理
Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...
随机推荐
- Sign in with Apple 流程总结
流程图 相关说明 UserId 与用户的 Apple Id 一一对应.在同一个开发帐号下的所有 app 里,获取到的值都一样. IdentityToken identityToken 是一个 Json ...
- C言语--冒泡排序
/* 冒泡排序,从小到大 */ include<stdio.h> int main(void) { int i; int t; int p; int val; int a[6]; for( ...
- js 判断 数组和对象
提方案的时候顺便会引申一下该方法的使用. 一,instanceOf:(可以判断) instanceOf运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性. 也可以这样说 ...
- 微信小程序入门教程
首先请看demo 很简单的静态js就可以实现一款小程序开发. js.json.html.css四个核心文件 序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小 ...
- 2020.08.23 瞎扯周记之论短暂假期(QAQ)内要不要睡午觉
蒟蒻的假期都是很短暂的嘛 作为一只合格的蒟蒻 假期自然是很短暂的QAQ 只有短短的26h93360s(手动微笑) 总体来讲 假期只有两件事要干: 1.满足人体自身需求 2.满足作业需求 2.5.摸鱼 ...
- 【亲测】手把手教你如何破解pycharm(附安装包和破解文件)
此教程支持最新的2019.3版本的Pycharm,并兼容之前的版本. 一.准备工作: 1.下载Pycharm 有条件的可以自行去官网下载,这里我提供了我下载的版本,已上传到百度网盘,链接在下方. 2. ...
- Nodejs模块:path
当前版本:v 10.16.0 一,获取文件相关信息 1,path.basename(filepath[, ext]) 获取该文件的文件名,如果有扩展名,则一起显示扩展名: 如果不想展示扩展名,只想展示 ...
- Unity NGUI C#性能优化
建议读者先看这篇博文:http://blog.csdn.net/zzxiang1985/article/details/43339273,有些技术已经变了,比如第1招,unity5的打包机制已经变许多 ...
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA
今天是算法数据结构专题的第33篇文章,我们一起来聊聊最短路问题. 最短路问题也属于图论算法之一,解决的是在一张有向图当中点与点之间的最短距离问题.最短路算法有很多,比较常用的有bellman-ford ...
- P1073 最优贸易 分层图+最长路
洛谷p1073 最优贸易 链接 首先易得暴n2的暴力,暴力枚举就行 显然1e5的数据是会炸的 我们再分析题意,发现一共分为两个个步骤,也可以说是状态,即在一个点买入,在另一个点卖出,我们可以构建一个三 ...