vue的数组实现原理

Vue 数组响应式原理

Vue 通过重写数组的原型方法来实现对数组变化的监听。具体实现方式是利用 JavaScript 的原型链机制，创建一个新的数组原型对象，并覆盖其中能够修改原数组的方法。

重写数组方法

Vue 会拦截以下数组方法：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

这些方法被重写后，会在执行原有逻辑的同时触发依赖更新。

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
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    ob.dep.notify()
    return result
  })
})

数组响应式处理

Vue 在处理数据响应式时，会对数组进行特殊处理：

class Observer {
  constructor(value) {
    if (Array.isArray(value)) {
      value.__proto__ = arrayMethods
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

注意事项

直接通过索引修改数组元素或修改数组长度不会触发响应式更新：

// 不会触发视图更新
this.items[index] = newValue
this.items.length = newLength

应该使用 Vue 提供的 set 方法或数组的变异方法：

// 正确方式
this.$set(this.items, index, newValue)
this.items.splice(index, 1, newValue)

深层数组监听

对于嵌套数组，Vue 会递归地为每个数组元素创建响应式绑定：

function observeArray(items) {
  for (let i = 0, l = items.length; i < l; i++) {
    observe(items[i])
  }
}

这种实现方式确保了数组操作能够触发视图更新，同时保持了 JavaScript 数组原有的行为特性。