对数组的响应式解决

  • 在 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']