vue中是怎样监听数组变化的


Posted in Javascript onOctober 24, 2020

我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push、splice、pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章)。但实际用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢?

通过vue源码可以看出,vue重写了数组的push、splice、pop等方法。

// src/core/observer/array.js

// 获取数组的原型Array.prototype,上面有我们常用的数组方法
const arrayProto = Array.prototype
// 创建一个空对象arrayMethods,并将arrayMethods的原型指向Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 列出需要重写的数组方法名
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
// 遍历上述数组方法名,依次将上述重写后的数组方法添加到arrayMethods对象上
methodsToPatch.forEach(function (method) {
 // 保存一份当前的方法名对应的数组原始方法
 const original = arrayProto[method]
 // 将重写后的方法定义到arrayMethods对象上,function mutator() {}就是重写后的方法
 def(arrayMethods, method, function mutator (...args) {
  // 调用数组原始方法,并传入参数args,并将执行结果赋给result
  const result = original.apply(this, args)
  // 当数组调用重写后的方法时,this指向该数组,当该数组为响应式时,就可以获取到其__ob__属性
  const ob = this.__ob__
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // 将当前数组的变更通知给其订阅者
  ob.dep.notify()
  // 最后返回执行结果result
  return result
 })
})

从上面可以看出array.js中重写了数组的push、pop、shift、unshift、splice、sort、reverse七种方法,重写方法在实现时除了将数组方法名对应的原始方法调用一遍并将执行结果返回外,还通过执行ob.dep.notify()将当前数组的变更通知给其订阅者,这样当使用重写后方法改变数组后,数组订阅者会将这边变化更新到页面中。

重写完数组的上述7种方法外,我们还需要将这些重写的方法应用到数组上,因此在Observer构造函数中,可以看到在监听数据时会判断数据类型是否为数组。当为数组时,如果浏览器支持__proto__,则直接将当前数据的原型__proto__指向重写后的数组方法对象arrayMethods,如果浏览器不支持__proto__,则直接将arrayMethods上重写的方法直接定义到当前数据对象上;当数据类型为非数组时,继续递归执行数据的监听。

// src/core/observer/index.js
export class Observer {
 ...
 constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  def(value, '__ob__', this)
  if (Array.isArray(value)) {
   if (hasProto) {
    protoAugment(value, arrayMethods)
   } else {
    copyAugment(value, arrayMethods, arrayKeys)
   }
   this.observeArray(value)
  } else {
   this.walk(value)
  }
 }
 ...
}
function protoAugment (target, src: Object) {
 /* eslint-disable no-proto */
 target.__proto__ = src
 /* eslint-enable no-proto */
}
function copyAugment (target: Object, src: Object, keys: Array<string>) {
 for (let i = 0, l = keys.length; i < l; i++) {
  const key = keys[i]
  def(target, key, src[key])
 }
}

经过上述处理后,对于数组,当我们调用其方法处理数组时会按照如下原型链来获取数组方法:

vue中是怎样监听数组变化的

对于响应式数组,当浏览器支持__proto__属性时,使用push等方法时先从其原型arrayMethods上寻找push方法,也就是重写后的方法,处理之后数组的变化会通知到其订阅者,更新页面,当在arrayMethods上查询不到时会向上在Array.prototype上查询;当浏览器不支持__proto__属性时,使用push等方法时会先从数组自身上查询,如果查询不到会向上再Array.prototype上查询。

对于非响应式数组,当使用push等方法时会直接从Array.prototype上查询。

值得一提的是源码中通过判断浏览器是否支持__proto__来分别使用protoAugment和copyAugment 方法将重写后的数组方法应用到数组中,这是因为对于IE10及以下的IE浏览器是不支持__proto__属性的:

上述截图参考于Vue源码解析五——数据响应系统

结论:

在将数组处理成响应式数据后,如果使用数组原始方法改变数组时,数组值会发生变化,但是并不会触发数组的setter来通知所有依赖该数组的地方进行更新,为此,vue通过重写数组的某些方法来监听数组变化,重写后的方法中会手动触发通知该数组的所有依赖进行更新。

如果我的内容能对你有所帮助,我就很开心啦!

以上就是vue中是怎样监听数组变化的的详细内容,更多关于vue 监听数组变化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 #Javascript
You might like
php 使用post,get的一种简洁方式
2010/04/25 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python中进程和线程的区别详解
2017/10/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
环保倡议书300字
2014/05/15 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
物流专业求职信
2014/06/30 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书