Vue3之事件循环、nextTick与源码解析

Vue3 中，有时当我们去改变数据操作 Dom 结构时并未生效，这时就需要使用 nextTick，这是什么原因呢？它与事件循环又有什么关系呢？让我们一步一步来看。

让我们先看下事件循环。

一、事件循环

众所周知，JavaScript 是单线程的，那为什么呢？，比如 JavaScript 是多线程的，那么比如有两个线程，第一个线程对 Dom 进行增加操作，第二个线程对 Dom 进行删除操作，那么这时浏览器就不知道该怎么办了。

那既然 JavaScript 是单线程的，就随之而来产生另一个问题：当进行一个耗时比较长的任务时（比如加载一个高清图片）它会阻塞代码的执行，这对用户而言是没有办法接收的或是容忍不了的。所以为解决这个问题就产生了事件循环。在说事件循环之前，让我们看一下同步任务和异步任务。

同步任务

由上向下执行的 JavaScript 代码。

异步任务

异步任务又分为宏任务和微任务。

宏任务：setTimeout，setInterval，JavaScript整体代码（包含同步任务），ajax，postMessage，JavaScript中的交互事件。微任务：Promise.then catch finally，MutaionObserver，process.nextTick(Nodejs环境下)。

事件循环

话不多说，上图：

那么这就是事件循环，当程序执行时，首先将同步任务压入执行栈中，此外，还有一个异步任务队列。当所有的同步任务执行完毕后就会执行异步任务队列中的一个宏任务，当宏任务执行完毕时，就会执行所有可以执行的微任务。宏任务，微任务交替执行就形成了一个事件循环（tick）。

二、nextTick

使用方法

第一种：传入一个回调函数，在这个回调函数里对 Dom 进行操作。

js 复制代码

   nextTick(() => {
       // 所要进行的 Dom 操作
   });

第二种：使用 async 和 await。await nextTick() 之后的都为异步代码。

js 复制代码

    const test = async () => {
        ...... // 同步代码
        await nextTick();
        // 异步代码，所要进行的 Dom 操作
        ......
    };

接下来让我们分析一下为什么有时候当对数据进行操作后，Dom 并没有更新。原因就是在 Vue3 中，对数据的响应式是同步的，而 Dom 的更新则是异步的。让我们看一个栗子：

js 复制代码

    <template>
        <div>
            {{ const }}
        </div>
    </template>
    
    <script setup>
    const const = ref(0);
    
    watch(
        const,
        (newVal) => {
            console.log(newVal);
        }
    )
    
    let i;
    for (i = 0; i < 1000; i++) {
        const.value++;
    }
    </script>

大家可能以为 const 会从 1 开始一直输出，其实并不是，最后结果只输出了 1000，而 Dom 也只渲染了一次。那么就会产生开始说的那个问题，当数据改变的时候，有时候 Dom 并没有更新。因为 Dom 的更新是异步的，它会在所有的同步代码执行完毕后再进行执行。这时就可以使用 nextTick 将同步代码转为异步代码，这样就会在浏览器下一个事件循环（tick）中执行该异步代码从而进行 Dom 的更新。那，接下来让我们看看 nextTick在源码中是怎么实现的。

三、nextTick 源码解析

位置：core-main/packages/runtime-core/src/scheduler.ts

ts 复制代码

    const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
    let currentFlushPromise: Promise<void> | null = null
    export function nextTick<T = void, R = void>(
      this: T,
      fn?: (this: T) => R,
    ): Promise<Awaited<R>> {
      const p = currentFlushPromise || resolvedPromise
      return fn ? p.then(this ? fn.bind(this) : fn) : p
    }

哦~，看到这儿，原来如此，它是把一个同步的代码块使用 Promise 包装了一下从而变成了一个异步任务。这也解释了为什么我们可以通过 async 和 await 的方式使用 nextTick。

Tips：Vue3 中把 Dom 的更新设置为异步的主要原因是考虑到性能优化的问题，比如当一个数据变化 100000 次，总不能让 Dom 也更新这么多次，这就造成太多的性能浪费了。