简说Vue中的nexttick原理😎

前言

在掘金上刷到有关于Vue中的 nextTick的文章，之后又翻了翻掘金上的小册，这里我把我所理解的nextTick的工作原理记录下来，希望对大家有所帮助。

<math xmlns="http://www.w3.org/1998/Math/MathML"> n e x t T i c k nextTick </math>nextTick介绍

当你在Vue中更改响应式状态时，最终的DOM更新并不是同步生效的，而是由Vue将它们缓存在一个队列中，直到下一个"tick"才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick可以在状态改变后立即使用，以等待DOM更新完成。你可以传递一个回调函数作为参数，或者await返回的Promise

在学习nextTick之前我们首先要搞清楚前端事件循环机制 和Vue的页面更新机制。

Event Loop

因为篇幅原因这里对于Event Loop执行机制的做下简单介绍。事件循环指的是js代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规则。

浏览器在解析js代码时将遵循以下规则

遇到同步代码，立即执行
遇到宏任务,放入到宏任务队列里.
遇到微任务,放入到微任务队列里.
执行完所有同步代码
执行微任务代码
微任务代码执行完毕，本次队列清空
寻找下一个宏任务，执行宏任务代码

异步更新

来看下面这段代码

js 复制代码

export default {
  data() {
    return {
      mes: 0
    }
  },
  mounted(){
    this.mes  = 1
    this.mes  = 2
    this.mes  = 3
  },

  watch:{
    mes(){
      console.warn(this.mes);
    }
}

这段代码乍一看执行后的输出为1,2,3。但实际输出却为3

再看这一段

js 复制代码

<template>
  <div>{{ mes }}</div>
</template>

<script>
export default {
  data() {
    return {
      mes:1
    }
  },
  mounted(){
    for(let i = 0;i< 100;i++){
      this.mes++
    }
  }
}
</script>

页面上数据似乎会从1加到101的变化，实际上只会看到从1直接变为101，其实想想也能明白，执行这么一小段代码如果DOM需要更新渲染100次，那么效率是否也太低了。

这两个例子印证了Vue中所有响应式数据的修改，DOM不会同步更新，而是会等到某个"时机"之后统一更新

<math xmlns="http://www.w3.org/1998/Math/MathML"> n e x t T i c k nextTick </math>nextTick运行机制

<math xmlns="http://www.w3.org/1998/Math/MathML"> t i c k tick </math>tick

tick我们可以理解为一个"时机"，nextTck可以理解为在这个"时机"之后

Vue中nextTick所做的就是在等待这个"时机"DOM完成更新渲染之后（next）执行对应的回调函数。

具体实现

nextTcik接收一个回调函数callback，然后它会将这个callback推入一个队列中，等待下一个tick之后清空队列并执行里面所有的callback。

Vue.js源码中使用Promise、setTimeout等方法实现，目的就是依靠js事件循环机制等待调用栈执行完毕之后才会去执行这个方法。我们简单模拟实现一下：

注意：nextTick并不是具体的宏任务或是微任务实现，根据源码版本的不同，nextTick实现方法也不同，笔者这里只做简单演示

js 复制代码

let callbacks = [];
let pending = false;

function nextTick (cb) {
    callbacks.push(cb);
    if (!pending) {
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}

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

setTimeout就相当于一个tick，创建一个宏任务以确保在下一个tick调用，flushCallbacks用来清空callbacks数组，执行里面的所有回调函数。

总结

将回调放到callbacks里等待执行；

将执行函数（flushCallbacks）放到微任务或宏任务里；原码里按照是否原生支持Promise.then、MutationObserver和setImmediate的顺序决策，都不支持则使用setTimeout

等到事件循环执行到微任务或者宏任务时，执行函数依次执行callbacks里的回调；