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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
js创建元素(节点)示例
Jan 02 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
Vue实现搜索结果高亮显示关键字
May 28 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生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python修改操作系统时间的方法
2015/05/18 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Python实现手势识别
2020/10/21 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
实验教师岗位职责
2014/02/13 职场文书
三字经教学反思
2014/04/26 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
python三子棋游戏
2022/05/04 Python