Array.prototype.push.apply(arr1, arr2)在vue中不会触发dom更新
export default {
data() {
return {
arr1: []
}
}
昨天做项目遇到两个数组合并,把数组2合并到数组1
使用了Array.prototype.push.apply(arr1, arr2)
发现数组是合并了,但dom上执行v-for 并没有发生任何改变
但奇怪的是改成 arr1.push.apply(arr1, arr2)
就会触发dom更新
输出了一下 arr1.__proto__ === Array.prototype
结果为 false
很明显这两者是不相等的
arr1.__proto__.__proto__ === Array.prototype
则会true
猜想vue源码应该是修改了Array.prototype.push()方法,引用的时候调用的应该是修改后的方法。
应该是只有在vue已经进行观察的数组上调用的方法添加的数据才会被加上observe
2020.12.28
查看源码刚好回顾到这个问题,原因是因为vue2实现监听数据变化的方法使用的是Object.defineProperty 这个方法并不能监听到数组的变化,所以vue在源码中对数组的一些原型方法进行了改写,调用真正的原型方法后在进行触发视图更新。