关于vue.js:从Vue3源码中再谈nextTick

开始之前先看下官网对其的定义

定义: 在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，获取更新后的 DOM

看完是不是有一堆问号？咱们从中找进去产生问号的关键词

• 下次 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')
    }
  }
})

亲自试一试

那么 nextTick 是怎么做到的呢？为了前面的内容更好了解，这里咱们得从 js 的执行机制说起

JS 执行机制

咱们都晓得 JS 是单线程语言，即指某一时间内只能干一件事，有的同学可能会问，为什么 JS 不能是多线程呢？多线程就能同一时间内干多件事件了

是否多线程这个取决于语言的用处，一个很简略的例子，如果同一时间，一个增加了 DOM，一个删除了 DOM, 这个时候语言就不晓得是该添还是该删了，所以从利用场景来看 JS 只能是单线程

单线程就意味着咱们所有的工作都须要排队，前面的工作必须期待后面的工作实现能力执行，如果后面的工作耗时很长，一些从用户角度上不须要期待的工作就会始终期待，这个从体验角度上来讲是不可承受的，所以 JS 中就呈现了异步的概念

概念

• 同步 在主线程上排队执行的工作，只有前一个工作执行结束，能力执行后一个工作
• 异步 不进入主线程、而进入 ” 工作队列 ”（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
}

亲自试一试

看到这里，有的同学可能又会问，后面咱们猜测的 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

@JS 语音社群