个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue中是怎样监听数组变化的由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 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上重写的方法直接定义到当前数据对象上；当数据类型为非数组时，继续递归执行数据的监听.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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 监听数组变化的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/ming1025/p/13082822.html 。

最后此篇关于vue中是怎样监听数组变化的的文章就讲到这里了,如果你想了解更多关于vue中是怎样监听数组变化的的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： 解决vue中使用less/sass及使用中遇到无效的问题
文章推荐： Python构建图像分类识别器的方法
文章推荐： 使用python opencv对目录下图片进行去重的方法
文章推荐： Vue源码解析之数据响应系统的使用
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com