vue源码分析之nextTick

Vue 中有个 API 是nextTick, 官方文档是这样介绍作用的：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

理解这部分内容，有助于理解 Vue 对页面的渲染过程，同时也可以了解到 beforeUpdate 和updated的使用。另外就是通过了解 nextTick 的调用了解 vue 内部是如何使用 Promise 的。这部分内容和之前介绍计算属性的内容也有关联，可以比照着看。

首先看一下我创建的例子：

    <!-- HTML 部分 -->
    <div id="test">
      <p>{{name}}的年龄是{{age}}</p>
      <!-- <p>
        {{info}}
      </p> -->
      <div> 体重 <input type="text" v-model="age" /></div>
      <button @click="setAge"> 设置年龄为 100</button>
    </div>

      // js 部分
      new Vue({
        el: '#test',
        data() {
          return {
            name: 'tuanzi',
            age: 2
          }
        },
        beforeUpdate() {console.log('before update')
          debugger
        },
        updated() {console.log('updated')
          debugger
        },
        methods: {setAge() {
            this.age = 190
            debugger
            this.$nextTick(() => {console.log('next tick', this.age)
              debugger
            })
          }
        }
      })

当页面渲染完成，点击按钮触发事件之后，都会发生什么呢~~

直接介绍计算属性的时候说过，当页面初次加载渲染，会调用模板中的值，这时会触发该值的 getter 设置。所以对于我们这里，data 中的 name 和age都会订阅 updateComponent 这个方法，这里我们看下这个函数的定义：

    updateComponent = () => {vm._update(vm._render(), hydrating)
    }

简而言之，这时用来渲染页面的，所以当代码执行到 this.age = 190，这里就会触发age 的setter属性，该属性会调用 dep.notify 方法：

  // 通知
  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 不在调度中排序
      // 为了保证他们能正确的执行，现在就带他们进行排序
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {subs[i].update()}
  }

这里的 this.subs 就是页面初始化过程中，age这个属性收集到的依赖关系，也就是 renderWatcher 实例。接着调用 renderWatcher 的update方法。

  /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update() {
    // debugger
    /* istanbul ignore else */
    if (this.lazy) {
      // 执行 computedWacher 会运行到这里
      this.dirty = true
    } else if (this.sync) {this.run()
    } else {
      // 运行 renderWatcher
      queueWatcher(this)
    }
  }

那为了更好的理解这里，我把 renderWatcher 的实例化的代码也贴出来：

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(
    vm,
    updateComponent,
    noop,
    {before() {if (vm._isMounted && !vm._isDestroyed) {callHook(vm, 'beforeUpdate')
        }
      }
    },
    true /* isRenderWatcher */
  )

因此，renderWatcher是没有设置 lazy 这个属性的，同时我也没有手动设置 sync 属性，因此代码会执行到 queueWatcher(this)。注意这里的this，当前属于renderWatcher 实例对象，因此这里传递的 this 就是该对象。

// 将一个 watcher 实例推入队列准备执行
// 如果队列中存在相同的 watcher 则跳过这个 watcher
// 除非队列正在刷新
export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  debugger
  if (has[id] == null) {has[id] = true
    if (!flushing) {
      // 没有在刷新队列，则推入新的 watcher 实例
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
 
      // 队列已经刷新，则用传入的 watcher 实例的 id 和队列中的 id 比较，按大小顺序插入队列
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {i--}
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
 
      if (process.env.NODE_ENV !== 'production' && !config.async) {flushSchedulerQueue()
        return
      }
      debugger
      nextTick(flushSchedulerQueue)
    }
  }
}

这段代码比较简单，就说一点。代码里有个判断是 config.async，这是 Vue 私有对象上的值，默认的是true，因此代码会执行到nextTick 这里，此时会传入一个回调函数 flushSchedulerQueue，我们这里先不说，之后用的的时候再介绍。现在看看nextTick 的实现。

const callbacks = []
let pending = false
 
export function nextTick(cb?: Function, ctx?: Object) {
  debugger
  let _resolve
  callbacks.push(() => {if (cb) {
      try {cb.call(ctx)
      } catch (e) {handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {_resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()}
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {_resolve = resolve})
  }
}

pendding用来判断是否存在等待的队列，callbacks是执行回调的队列。那对于此时此刻，就是向 callbacks 推入一个回调函数，其中要执行的部分就是flushSchedulerQueue。因为是初次调用这个函数，这里的就会调用到timerFunc。

  let timerFunc
  
  const p = Promise.resolve()
  
  timerFunc = () => {p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }

现在毫无因为的是 timerFunc 这个函数会被调用。但是有个问题，p.then(flushCallbacks)这句话会执行么？来看个例子：

function callback() {console.log('callback')
}
 
let p = Promise.resolve()
function func() {p.then(callback)
}
 
console.log('this is start')
 
func()
 
console.log('this is pre promise 1')
 
let a = 1
console.log('this is pre promise 2')
console.log(a)

思考一下结果是什么吧。看看和答案是否一致：

说回上面，p.then(flushCallbacks)这句话在这里会执行，但是是将 flushCallbacks 这个方法推入了微任务队列，要等其他的同步代码执行完成，执行栈空了之后才会调用。所以对于 renderWatcher 来说，目前就算执行完了。

接下来代码执行到这里：

this.$nextTick(() => {console.log('next tick', this.age)
  debugger
})

看下 $nextTick 的定义：

  Vue.prototype.$nextTick = function (fn: Function) {return nextTick(fn, this)
  }

这里定义 $nextTick 是定义在 Vue 的原型对象上，所以在页面中可以通过 this.$nextTick 调用，同时传入的 this 就是当前页的实例。所以看会 nextTick 定义的部分，唯一的区别是，这是的 pendding 是false，因此不会再调用一次timerFunc。

setAge里的同步代码都执行完了，因此就轮到 flushCallbacks 出场。来看下定义：

function flushCallbacks() {
  debugger
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  console.log(copies)
  for (let i = 0; i < copies.length; i++) {copies[i]()}
}

这里定义的位置和定义 nextTick 是在同一个文件里，因此 pendding 和callbacks是共享的。主要就看 copies[i]() 这一段。经过前面的执行，此时 callbacks.length 的值应该是 2。copies[1]指的就是先前推进队列的flushSchedulerQueue。

/**
 * Flush both queues and run the watchers.
 *
 * 刷新队列并且运行 watcher
 */
function flushSchedulerQueue() {currentFlushTimestamp = getNow()
  flushing = true
  let watcher, id
 
  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child)
  // 2. A component's user watchers are run before its render watcher (because
  //    user watchers are created before the render watcher)
  // 3. If a component is destroyed during a parent component's watcher run,
  //    its watchers can be skipped.
 
  // 给刷新队列排序，原因如下：// 1. 组件的更新是从父组件开始，子组件结束
  // 2. 组件的 userWatcher 的运行总是先于 renderWatcher
  // 3. 如果父组件的 watcher 运行期间，子组件被销毁了，后续运行可以跳过被销毁的子组件
  queue.sort((a, b) => a.id - b.id)
 
  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  for (index = 0; index < queue.length; index++) {watcher = queue[index]
    if (watcher.before) {watcher.before()
    }
    id = watcher.id
    has[id] = null
    watcher.run()
    // in dev build, check and stop circular updates.
    if (process.env.NODE_ENV !== 'production' && has[id] != null) {circular[id] = (circular[id] || 0) + 1
      if (circular[id] > MAX_UPDATE_COUNT) {warn('You may have an infinite update loop' + (watcher.user ? `in watcher with expression "${watcher.expression}"` : `in a component render function.`), watcher.vm)
        break
      }
    }
  }

watcher.before这个方法是存在的，先前的代码中有，在初始化 renderWatcher 时传入了这个参数。这里就调用了 callHook(vm, 'beforeUpdate')，所以能看出来，此时beforeUpdate 执行了。接着执行 watcher.run()。run 是Watcher类上定义的一个方法。

  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   */
  run() {
    debugger
    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) {
          try {this.cb.call(this.vm, value, oldValue)
          } catch (e) {handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

this.active初始化的值就是 true，get方法之前的文章也提到过，这里再贴一遍代码：

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  get() {
    // debugger
    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
  }

这部分代码之前说过，这里就不再说了，只提一点，此时的 this.getter 执行的是 updateComponent, 其实也就是里面定义的vm._update(vm._render(), hydrating)。关于render 和update我会在分析虚拟 dom 时介绍。

现在需要知道的是，页面此时会重新渲染，我在 setAge 方法中修改了 age 的值，当 vm._update 执行完，就会发现页面上的值变化了。那接着就执行 callbacks 中的下一个值，也就是我写在 $nextTick 中的回调函数，这个就很简单，没必要再说。点击按钮到现在新的页面渲染完成，执行的结果就是：

before update
updated
next tick 100

这里就把整个流程讲完了，但是我想到 vue 文档中说的：

在修改数据之后立即使用它，然后等待 DOM 更新

假设我现在要是把 $nextTick 放到修改值之前呢。把 setAge 修改一下。

  setAge() {this.$nextTick(() => {console.log('next tick', this.age)
      debugger
    })
    debugger
    this.age = 100
  }

思考一下，此时点击按钮，页面会打印出什么东西。按照逻辑，因为 $nextTick 写在了前面，因此会被先推进 callbacks 中，也就会被第一个执行。所以此时我以为打印出来的 age 还是 2。但我既然都这样说了，那结果肯定是和我以为的不一样，但我有一部分想的没错，就是优先推入，优先调用。当我忘了一点，大家也可以会想一下，renderWatcher是如何被触发的？

$nextTick回调现在是进入了微任务队列，所以会继续执行接下来的赋值。此时会触发 age 设置的 setter 里的 dep.notify。但在调用之前，新的值就已经传给 age 了。所以当$nextTick 里的回调执行时，会触发 age 的getter，拿到的值就是新的值。

整个 nextTick 事件就介绍完了。