【面试题】Vue2 中如何检测数组变化
本文于 1222 天之前发表,文中内容可能已经过时。
为什么要对数组进行单独处理
我们都知道在Vue2中,对响应式处理利用的是 Object.defineProperty
对数据进行拦截。如果数据是数组,我们还是用defineProperty的方法进行拦截的话,需要对数组每一层每一位都进行依赖收集和更新时的notify,这样消耗的性能将指数倍增加,因为我们无法预估一个数组有多少层有多少位。
考虑性能原因,没有用 defineProperty 对数组的每一项进行拦截,而是选择对下面7个数组方法进行重写:
- push
- shift
- pop
- splice
- unshift
- sort
- reverse
为什么是上面7个方法?因为我们要监控的是原数组的数据变化,使用上面7个方法对数组进行操作,会改变原数组,而其他方法并不会改变原数组。
如何重写数组方法
我们先来看Vue2中关于重写数组方法的源码:
1 | const arrayProto = Array.prototype |
从上面的代码我们可以知道:vue2对push、splice等方法进行重写,如果加入新对象,会调用observe方法对新对象进行劫持。最后在向外抛出数组变化前,通知观察者进行视图更新。
补充
在Vue2中只有通过上面说的7中变异方法修改数组才会触发数组对应的watcher进行更新,如果我们修改数组的索引和长度是无法监控到的,也就无法实现视图更新。如果想更改索引更新数据,可以通过
Vue.$set()
来进行处理。数组中数据如果是对象类型,也会进行递归劫持。
欢迎关注我的微信公众号:前端极客技术(FrontGeek)
如果你觉得这篇内容对你有帮助的话:
1、点赞支持下吧,让更多的人也能看到这篇内容
2、关注公众号:前端极客技术(FrontGeek),我们一起学习一起进步。
欢迎关注微信公众号: 『前端极客技术』『代码视界』

赏
支付宝打赏
微信打赏


赞赏是不耍流氓的鼓励