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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
JS数组去重详情
Nov 07 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开源建站平台小结
2010/04/22 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
使用Apache的rewrite
2021/03/09 Servers
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript测试题练习代码
2012/10/10 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python如何实现强制数据类型转换
2019/11/22 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
车间班长岗位职责
2013/11/30 职场文书
司法所长先进事迹
2014/06/02 职场文书
初中政教处工作总结
2015/08/12 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书