Vue源码阅读--数组方法的响应式包装和实现

数组原生的方法产生的数据更新原本来说，是不会在使用Vue时发生响应式变化的，而我i们使用push，pop等方法实际上是因为Vue对这些方法做了一层封装，其基本的实现路径如下：

 

首先，包装监听的过程位于源代码文件夹中的\src\core\observer\array.js部分：

import { def } from '../util/index'

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original 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)
    // notify change
    ob.dep.notify()
    return result
  })
})

实际上，就是通过观察者模式，对数据更新的过程做了一次通知，即37行ob.dep.notify()。这里其实复用了Vue中使用观察者模式实现双向绑定中的代码。双向绑定的流程大概介绍如下图：

 

 

 这里即通过notify通知各个watch进行updata。

notify的过程可以参看同文件夹下的dep.js，我们可以定位到如下代码：

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

这里其实就是对各个观察者进行通知，调用update()：

  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

抛开一些其他判断和细节，这里下一步我们的主要过程实际上就是进入run():

 run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          const info = `callback for watcher "${this.expression}"`
          invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

这里第三行是关键处，在执行run()方法中的get()时。继而会调用当前watcher中的getter()方法，这里就是之前初始化时传入的updateComponent()，执行render函数重绘视图。

继续进入get():

 get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

可以看到关键就是getter()，这里和双向绑定的响应式一样，Vue通过getter的劫持，从而更新界面。

第六行的value = this.getter.call(vm, vm)
this.getter 对应就是 updateComponent 函数，这实际上就是在执⾏：
vm._update(vm._render(), hydrating)

从而实现组件更新。