共计 856 个字符,预计需要花费 3 分钟才能阅读完成。
对数组的响应式解决
- 在 src/observer/index.js 中
- 将原生批改原数组的办法,进行重写,保留性能,并能够在数组扭转时触发 notify 告诉 watcher 更新视图
- 并未解决 索引 和 length,尽管数组批改了,然而未触发 notify
- 因为咱们只解决了数组中的元素,而非属性(属性蕴含下标,length 等等),不解决因为性能问题
- 代替计划:通过 vm.arr.splice(0,1,100)
- Vue.set()
- this.$updateForce()
源码局部
if (Array.isArray(value)) {
// hasProt 用来判断 以后浏览器是否反对 对象原型 __proto__
// 修补数组中的原型办法,如果数组发生变化调用 notify 更新视图
if (hasProto) {protoAugment(value, arrayMethods)
} else {copyAugment(value, arrayMethods, arrayKeys)
}
// 遍历数组所有元素,是对象的元素会转化为响应式对象,而非所有属性!!!!// 下标和 length 是属性,无奈通过 vm.msg[0] 更新,因为性能问题
// 能够应用 vm.msg.splice(0,1,100) 代替
this.observeArray(value)
}
else {
// 遍历对象中的每个属性,转换成 setter/getter
this.walk(value)
}
const arrayProto = Array.prototype
// 创立一个对象,对象原型指向 传入的参数(此对象的原型指向 Array.prototype)export const arrayMethods = Object.create(arrayProto)
// 批改原数组元素的办法(批改原数据会调用 dep.notify,告诉 watcher 去更新视图,然而数组原生办法不会,须要修补)const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
正文完