《深入浅出vue.js》阅读笔记之数组变化侦测

 

 

1、如何追踪变化

数组的侦测方式和对象不同,比如:

this.list.push(1)

此时并不会像改变对象一样触发setter。

同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们可以用一个拦截器覆盖Array.prototype,每当使用array原型方法时,实际

执行的是拦截器中的方法,而拦截器中的方法储存原生方法实现。

2、实现拦截器

拦截器其实是一个和Array.prototype一样的object,只不过这个object中某些可以改变数组自身内容的方法是处理过的。

改变数组内容的方法一共有七个,push,pop,shift, unshiftj, slice, sort 和reverse

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methods = ['pop', 'push', 'shift', 'unshift', 'splice', 'sort', 'reverse']
methods.forEach(function (method) {// 缓存原始方法const original = arrayProto[method]Object.defineProperty(arrayMethods, method, {value: function mutator (...args) {return original.apply(this, args)},enumerable: false,writable: true,configurable: true,})
})

上面代码中,arrayMethods继承自Array.prototype,具备其所有功能。当使用push方法时,调用的是arrayMethods.push,即mutator函数,这里可以做一些发送通知

变化之类的事情。

3、使用拦截器覆盖Array原型

有了拦截器,就需要让它覆盖Array.prototype,但又不能直接覆盖,因为会污染全局变量Array,我们希望只是拦截那些被侦测了变化的数据生效。

这时就需要借助Observer

class Observer {constructor (value) {this.value = value}if (Array.isArray(value)) {value.__proto__ = arrayMethods} else {this.walk(value)}
}

它的作用是将拦截器(加工后具备拦截功能的arrayMethods)赋值给value.__proto__,通过__proto__巧妙的实现覆盖value原型功能。

__proto__其实是Object.getPrototypeOf和Object.setPrototypeOf的早期实现,所以使用es6的Object.setPrototypeOf来代替__ptoto__可以实现同样的效果。

4、将拦截器方法挂载到数组属性上

虽然绝大多数浏览器都支持这个非标准的属性来访问原型,但并不是所有浏览器都支持,因此需要处理不能使用__proto__的情况。

vue的做法是对于不能使用__proto__的,直接将arrayMethods身上的这些方法设置到被侦测的数组上。

export class Object {if (Array.isArray(value)) {const augment = hasProto ? protoAugment : copyAugmentaugment(value, arrayMethods, arrayKeys)} else {this.walk(value)}
}function protoAugment (target, src, keys) {target.__proto__ = src
}function copyAugment (target, src, keys) {for (let i=0, len = keys.lenght;i< 1; i++) {const key = keys[i]default(target, key, src[key])}
}

在上面代码中,新增了hasProto来判断当前浏览器是否支持__proto__,如果支持,则使用protoAugment覆盖原型,否则用copyAugment将拦截器中的方法挂载到value。

copyAugment函数用来将已经加工了拦截操作的原型方法直接添加到value的属性中。

 

转载于:https://www.cnblogs.com/pjl43/p/10666448.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

时隔16年,Science再次发布“全世界最前沿的125个科学问题”!

来源&#xff1a;文汇报《科学》杂志曾于创刊125周年之际发布过125个推动基础科学研究的科学难题&#xff0c;对指引其后十几年的科学发展产生积极影响。16年过去了&#xff0c;科技发展日新月异&#xff0c;科学突破层出不穷&#xff0c;许多问题得到一定程度的解答&#xff0…

牛客19115 选择颜色

链接&#xff1a;https://ac.nowcoder.com/acm/problem/19115 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 n个人排成一个环形&#xff0c;每个…

当人工智能遇上计算社会科学……

来源&#xff1a;微信公号&#xff1a;计算社会科学家原文出处:《人民论坛学术前沿》作者&#xff1a;华东师范大学哲学系教授 郦全民近年来&#xff0c;由深度学习引爆的“人工智能”&#xff0c;迅速成为科技领域乃至日常生活中的流行词&#xff1b;差不多同时&#xff0c;在…

Linux memcached

Linux memcached memcached是一套分布式的高速缓存系统&#xff0c;使用key-value来缓存数据&#xff0c;是由LiveJournal的Brad Fitzpatrick开发&#xff0c;目前被许多网站使用。这是一套开放源代码软件&#xff0c;以BSD license授权发布。memcached缺乏认证以及安全管制…

牛客18985 数字权重 (数学,快速幂)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/18985 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 小a有一个n位的数字&#xff0c;但是…

Science 封面:史上最小飞行器,有翼微芯片仅沙粒大小,可用于环境监测

来源&#xff1a;机器人大讲堂据最新一期《自然》杂志刊发的论文&#xff0c;西北大学的工程师为电子微芯片增加了一种新的能力&#xff1a;飞行。据了解&#xff0c;这种微芯片大概只有一粒沙子大小&#xff0c;另外它没有马达。相反&#xff0c;它在风中捕获飞行--很像枫树的…

牛客15324 用来作弊的药水

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15324 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 在一个风雨交加的夜晚&#xff0c;来…

由于这个现象,我们永远无法精确测量时间

几乎任何事物都可以作为时钟&#xff0c;只是有些时钟比其他的更好用而已。图片来源&#xff1a;Corinne Reid来源&#xff1a;环球科学2013年&#xff0c;物理学硕士研究生保罗埃凯尔&#xff08;Paul Erker&#xff09;仔细翻阅着教科书和论文&#xff0c;试图从中找到“时钟…

牛客15187 分元宵 (快速幂)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15187 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 s, v, w, p, A list(map(int, i…

“诺奖风向标”2021拉斯克奖公布:授予mRNA疫苗、光遗传学以及戴维·巴尔的摩...

拉斯克奖奖杯来源&#xff1a;科研圈当地时间 9 月 24 日晚间&#xff0c;有“诺奖风向标”之称的拉斯克奖&#xff08;Lasker Award&#xff09;公布了 2021 年获奖人名单&#xff1a;基础医学奖 授予为开发光遗传学技术做出突出贡献的卡尔戴瑟罗斯&#xff08;Karl Deisserot…

牛客14718 开心的涂刷

链接&#xff1a;https://ac.nowcoder.com/acm/problem/14718 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 一天小明同学拿着m种颜色的油漆去涂…

华为全新发布开源操作系统欧拉:覆盖数字基础设施全场景

来源&#xff1a;C114通信网&#xff08;C114-weixin&#xff09;作者&#xff1a;舒允文在华为全联接2021上&#xff0c;面向数字基础设施的开源操作系统欧拉&#xff08;openEuler&#xff09;全新发布。欧拉操作系统可广泛部署于服务器、云计算、边缘计算、嵌入式等各种形态…

牛客15499 Jxc军训(快速幂,逆元)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15499 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 在文某路学车中学高一新生军训中&…

《新一代人工智能伦理规范》发布

来源&#xff1a;科技部战略规划司9月25日&#xff0c;国家新一代人工智能治理专业委员会发布了《新一代人工智能伦理规范》(以下简称《伦理规范》)&#xff0c;旨在将伦理道德融入人工智能全生命周期&#xff0c;为从事人工智能相关活动的自然人、法人和其他相关机构等提供伦理…

Centos7搭建Redis,同一服务器启动两个端口的Redis

1、安装redis 【1】下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 【2】安装redis #解压tar zvxf redis-4.0.11.tar.gz#make之前要安装gcc yum -y …

牛客15555 1 + 2 = 3?

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15555 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 131072K&#xff0c;其他语言262144K 64bit IO Format: %lld 题目描述 小Y在研究数字的时候&#xff0c;…

光遗传学离诺奖又双叒进一步!10天后谜底将揭晓 (盘点光遗传学近年来获奖记录)...

来源&#xff1a;brainnews距离2021年诺奖公布的日期&#xff0c;只有不到10天时间。2021年诺贝尔奖获奖得主名单将自2021年10月4日开始陆续公布。今年&#xff0c;光遗传学技术获奖的呼声依旧很高&#xff0c;Brainnews汇总了光遗传学技术近年来获奖的信息。当地时间 9 月 24 …

杂项:TMT(数字媒体产业)

ylbtech-杂项&#xff1a;TMT&#xff08;数字媒体产业&#xff09;TMT&#xff08;Technology&#xff0c;Media&#xff0c;Telecom&#xff09;&#xff0c;是科技、媒体和通信三个英文单词的缩写的第一个字头&#xff0c;整合在一起。含义实际是未来&#xff08;互联网&…

牛客18987 粉嘤花之恋(矩阵快速幂、斐波那契数列)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/18987 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 qn是个特别可爱的小哥哥&#xff0c…

新型智能头盔可快速评估患者中风的大小、位置和类型

来源&#xff1a;IEEE电气电子工程师 The proposed helmet uses electromagnetic waves to estimate the size and position of stroke inside a patients brain. FOS S.P.A./UNIVERSITY OF GENOA当有人中风了的时候&#xff0c;前期治疗的每一个瞬间都是至关重要的。理想情况…