NextTick是什么

我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

举例一下

Html结构

<div id="app"> {{ message }} </div>

构建一个vue实例

const vm = new Vue({
  el: '#app',
  data: {
    message: '原始值'
  }
})

修改message

this.message = '修改后的值1'
this.message = '修改后的值2'
this.message = '修改后的值3'

这时候想获取页面最新的DOM节点，却发现获取到的是旧值

console.log(vm.$el.textContent) // '原始值'

这是因为 message 在改变时,vue并不会立即去更新dom,而是会把修改数据的操作放在一个异步任务队列里,等待改变message的事件完全执行完毕后，再去更新dom

  const callbacks = []    //用来储存事件
 
  callbacks.push(() => {  // 将事件存起来
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })

如果我们一直修改相同数据，异步操作队列还会进行去重

等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新

为什么要有nextTick？

举一个例子如果没有nextTick, 我需要一个数据更新成千上万次取到最后一次的结果,这样每改变一次message 时候 don 都会更新一次。而nextTick的本质则是帮我们减少内耗，是一种优化策略。

实现原理

源码位置 /src/core/next-tick.js

callbacks也就是异步操作队列

callbacks新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve
                         //cd 回调函数会被处理后添加到  **callbacks**  中
  callbacks.push(() => {
    if (cb) { 
                         // 给 cb 回调函数执行加上了 try-catch 错误处理
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  
  if (!pending) { 
                         // 执行异步延迟函数 timerFunc 
    pending = true
    timerFunc()
  }
  // $flow-disable-line
                          // 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
                           // _resolve 接收 这个Promise的执行结果
      _resolve = resolve
    })
  }
}

timerFunc函数定义，这里是根据当前环境支持什么方法则确定调用哪个，分别有：

Promise.then、MutationObserver、setImmediate、setTimeout

通过上面任意一种方法，进行降级操作

if (typeof Promise !== 'undefined' && isNative(Promise)) {
                      //判断1：是否原生支持Promise
 
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks) 
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
      
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
                     //判断2：是否原生支持MutationObserver
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
                     //判断3：是否支持setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
                    //判断4：以上都不行的话 直接使用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

不管是微任务还是宏任务，都会被放到flushCallbacks中使用

然后将callbacks里的函数复制一份，同时再将callbacks清空

通过 copies 逐个执行

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

结尾

把 cd 放在 callbacks 等待执行
将要执行的函数都放到微任务或者宏任务中
事件执行到微任务或宏任务后，依次执行callback回调

vue $NextTick()

NextTick是什么

为什么要有nextTick？

实现原理

结尾