vue $nextTick()方法实现原理

什么是$nextTick()

在下次 DOM 更新循环结束之后执行延迟回调
简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

原理

1、nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务或微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入 队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法 。

2、宏任务按顺序执行，且浏览器在每个宏任务之间渲染页面
浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个宏任务执行结束后，在下一个宏任务执行开始前，对页面进行重新渲染 （当前宏任务->UI渲染->宏任务->…）

3、dom更新函数会先被callback进入异步事件队列，然后最后才会将nextTick里面的回调函数放进事件队列

具体逻辑

当调用nextTick方法时会传入两个参数，回调函数和执行回调函数的上下文环境，如果没有提供回调函数，那么将返回promise对象。首先将拿到的回调函数存放到数组中，判断是否正在执行回调函数，如果当前没有在pending的时候，就会执行timeFunc，多次执行nextTick只会执行一次timerFunc，timeFunc其实就是执行异步的方法，在timeFunc方法中选择一个异步方法
（首先判断是否支持promise，如果支持就将flushCallbacks放在promise中异步执行，并且标记使用微任务。如果不支持promise就看是否支持MutationObserver方法，如果支持就new了一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法。如果以上两个都不支持就看是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持，就使用setTimeout），然后异步去执行flushCallbacks方法，flushCallbacks中就是将传递的函数依次执行。

nextTick多次调用会维持一个数组，之后会异步的把数组中的方法以此执行，这样的话用户就会在视图更新之后再获取到真实的dom元素。

源码：

1.nextTick

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => { // 将拿到的回调函数存放到数组中
    if (cb) {
      try { // 错误捕获
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) { // 如果当前没有在pending的时候，就会执行timeFunc
    pending = true
    timerFunc() // 多次执行nextTick只会执行一次，timerFunc就是一个异步方法
  }
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
// 

2.flushCallbacks

const callbacks = [] // 回调函数集合
let pending = false
 
function flushCallbacks () { // 多个nextTick中传递的回调函数依次执行
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}
//flushCallbacks中会将函数备份一份，之所以要slice复制一份出来是因为有的cb执行过程中又会往callbacks中加入内容
//比如$nextTick的回调函数里又有$nextTick，那么这些应该放入到下一个轮次的nextTick去执行
//所以拷贝一份，遍历完成即可，防止一直循环下去。

3.timeFunc是一个异步方法

// 判断当前浏览器是否支持promise
if (typeof Promise !== 'undefined' && isNative(Promise)) { // Promise
  const p = Promise.resolve()
  timerFunc = () => { // flushCallbacks就包裹了一个promise
    p.then(flushCallbacks) // 异步的去执行flushCallbacks
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true // 标记了一下使用的是微任务
} else if (!isIE && typeof MutationObserver !== 'undefined' && ( // MutationObserver 
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // 如果不是IE，并且支持原生的MutationObserver，也是一个微任务
  let counter = 1
  const observer = new MutationObserver(flushCallbacks) // new了一个MutationObserver类
  const textNode = document.createTextNode(String(counter)) // 创建了一个文本节点
  observer.observe(textNode, { // 原生api，帮我们监听一个节点
    characterData: true // 当数据发生变化了就会异步执行flushCallbacks方法
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter) // 数据更新
  }
  isUsingMicroTask = true // 标记了一下使用的是微任务
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // setImmediate
  // setImmediate原生方法，默认ie下有，高版本的谷歌也支持
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else { // setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

应用场景

1、created中

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

 created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

2、操作dom后

当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

<div ref="testDiv">{{name}}</div>

name: '小林'

this.name = '公众号：前端印象'
console.log(this.$refs.testDiv.innerHTML) // 小林

所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？

this.name = '公众号：前端印象'
this.$nextTick(() => {
    console.log(this.$refs.testDiv.innerHTML) // 公众号：前端印象
})

3、调用第三方插件

在使用某个第三方插件时 ，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。
发送ajax请求数据回来之后还dom树还没有渲染完成（没有动态生成的ID）,导致获取到dom失败。