从 Vue3 源码中再谈 nextTick

开始以前先看下官方对其的定义html

定义: 在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOMvue

看完是否是有一堆问号？咱们从中找出来产生问号的关键词react

下次 DOM 更新循环结束以后?
执行延迟回调?
更新后的 DOM?

从上面三个疑问大胆猜测一下性能优化

vue 更新DOM是有策略的，不是同步更新
nextTick 能够接收一个函数作为入参
nextTick 后能拿到最新的数据

好了，问题都抛出来了，先来看一下如何使用多线程

import { createApp, nextTick } from 'vue'
const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      // 这里获取DOM的value是旧值
      await nextTick()
      // nextTick 后获取DOM的value是更新后的值
      console.log('Now DOM is updated')
    }
  }
})

<a href="https://vue3js.cn/run/nextTick" target="_blank">亲自试一试</a>app

那么 nextTick 是怎么作到的呢？为了后面的内容更好理解，这里咱们得从 js 的执行机制提及异步

JS执行机制

咱们都知道 JS 是单线程语言，即指某一时间内只能干一件事，有的同窗可能会问，为何 JS 不能是多线程呢？多线程就能同一时间内干多件事情了async

是否多线程这个取决于语言的用途，一个很简单的例子，若是同一时间，一个添加了 DOM，一个删除了 DOM, 这个时候语言就不知道是该添仍是该删了，因此从应用场景来看 JS 只能是单线程函数

单线程就意味着咱们全部的任务都须要排队，后面的任务必须等待前面的任务完成才能执行，若是前面的任务耗时很长，一些从用户角度上不须要等待的任务就会一直等待，这个从体验角度上来说是不可接受的，因此JS中就出现了异步的概念post

概念

同步在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
异步不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务能够执行了，该任务才会进入主线程执行

运行机制

（1）全部同步任务都在主线程上执行，造成一个执行栈（execution context stack）。
（2）主线程以外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步

nextTick

如今咱们回来vue中的nextTick

实现很简单，彻底是基于语言执行机制实现，直接建立一个异步任务，那么nextTick天然就达到在同步任务后执行的目的

const p = Promise.resolve()
export function nextTick(fn?: () => void): Promise<void> {
  return fn ? p.then(fn) : p
}

<a href="https://vue3js.cn/run/nextTick-demo-1.html" target="_blank">亲自试一试</a>

看到这里，有的同窗可能又会问，前面咱们猜测的 DOM 更新也是异步任务，那他们的这个执行顺序如何保证呢？

别急，在源码中nextTick还有几个兄弟函数，咱们接着往下看

queueJob and queuePostFlushCb

queueJob 维护job列队，有去重逻辑，保证任务的惟一性，每次调用去执行 queueFlush queuePostFlushCb 维护cb列队，被调用的时候去重，每次调用去执行 queueFlush

const queue: (Job | null)[] = []
export function queueJob(job: Job) {
  // 去重 
  if (!queue.includes(job)) {
    queue.push(job)
    queueFlush()
  }
}

export function queuePostFlushCb(cb: Function | Function[]) {
  if (!isArray(cb)) {
    postFlushCbs.push(cb)
  } else {
    postFlushCbs.push(...cb)
  }
  queueFlush()
}

queueFlush

开启异步任务(nextTick)处理 flushJobs

function queueFlush() {
  // 避免重复调用flushJobs
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true
    nextTick(flushJobs)
  }
}

flushJobs

处理列队，先对列队进行排序，执行queue中的job，处理完后再处理postFlushCbs, 若是队列没有被清空会递归调用flushJobs清空队列

function flushJobs(seen?: CountMap) {
  isFlushPending = false
  isFlushing = true
  let job
  if (__DEV__) {
    seen = seen || new Map()
  }

  // Sort queue before flush.
  // This ensures that:
  // 1. Components are updated from parent to child. (because parent is always
  //    created before the child so its render effect will have smaller
  //    priority number)
  // 2. If a component is unmounted during a parent component's update,
  //    its update can be skipped.
  // Jobs can never be null before flush starts, since they are only invalidated
  // during execution of another flushed job.
  queue.sort((a, b) => getId(a!) - getId(b!))

  while ((job = queue.shift()) !== undefined) {
    if (job === null) {
      continue
    }
    if (__DEV__) {
      checkRecursiveUpdates(seen!, job)
    }
    callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
  }
  flushPostFlushCbs(seen)
  isFlushing = false
  // some postFlushCb queued jobs!
  // keep flushing until it drains.
  if (queue.length || postFlushCbs.length) {
    flushJobs(seen)
  }
}

好了，实现全在上面了，好像尚未解开咱们的疑问，咱们须要搞清楚 queueJob 及 queuePostFlushCb 是怎么被调用的

//  renderer.ts
function createDevEffectOptions(
  instance: ComponentInternalInstance
): ReactiveEffectOptions {
  return {
    scheduler: queueJob,
    onTrack: instance.rtc ? e => invokeArrayFns(instance.rtc!, e) : void 0,
    onTrigger: instance.rtg ? e => invokeArrayFns(instance.rtg!, e) : void 0
  }
}

// effect.ts
const run = (effect: ReactiveEffect) => {
  ...

  if (effect.options.scheduler) {
    effect.options.scheduler(effect)
  } else {
    effect()
  }
}

看到这里有没有恍然大悟的感受？原来当响应式对象发生改变后，执行 effect 若是有 scheduler 这个参数，会执行这个 scheduler 函数，而且把 effect 当作参数传入

绕口了，简单点就是 queueJob(effect)，嗯，清楚了，这也是数据发生改变后页面不会当即更新的缘由

effect传送门

为何要用nextTick

一个例子让你们明白

{{num}}
for(let i=0; i<100000; i++){
	num = i
}

若是没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新，有了nextTick机制，只须要更新一次，因此为何有nextTick存在，相信你们内心已经有答案了。

总结

nextTick 是 vue 中的更新策略，也是性能优化手段，基于JS执行机制实现

vue 中咱们改变数据时不会当即触发视图，若是须要实时获取到最新的DOM，这个时候能够手动调用 nextTick

本文由博客一文多发平台 OpenWrite 发布！