Vue3源码 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）主线程不断重复上面的第三步

image.png

nextTick

现在我们回来vue中的nextTick

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

const p = Promise.resolve()

export function nextTick(fn?: () => void): Promise {

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) {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
图片转存中…(img-E0qoj2Mp-1715008050041)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！