vue中修改数组的方法
vue 中调用数组原始方法为什么也会响应式。
对数组中可修改原数组的方法进行了响应式处理,触发数据更新。
并对添加进数组的元素也做了依赖收集,当新添加的元素发生改变时也能触发数据更新。
源码如下:
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
//会修改原数组的方法
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
];
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator(...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
//对插入的元素进行observeArray
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})