2024年前端最新Vue3源码 nextTick解析，2024年最新前端存储面试题

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

实现很简单，完全是基于语言执行机制实现，直接创建一个异步任务，那么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) {

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传送门[1]

为什么要用nextTick

一个例子让大家明白

{{num}}

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

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注