解析nextTick---vue3任务调度

nextTick

定义：将回调推迟到下一个 DOM 更新周期之后执行，在更改了一些数据以等待 DOM 更新后立即使用它
在实际中使用这个方法一般是用于组件更新，你需要获取更新后的数据，所以使用nextTick等待DOM更新

// vue3中的语法对比vue2做了一些改动
import { createApp, nextTick } from 'vue'
const app = createApp({setup() {const message = ref('Hello!')const changeMessage = async newMessage => {message.value = newMessage// 这里的value是旧值await nextTick()// nextTick后获取的就是DOM更新后的valueconsole.log('Now DOM is updated')}}
})

这个api使用时相当简单，而且相当容易理解，但是为了知其意，还是要翻一下源码了解它的执行机制

export function nextTick(this: ComponentPublicInstance | void,fn?: () => void
): Promise<void> {const p = currentFlushPromise || resolvedPromisereturn fn ? p.then(this ? fn.bind(this) : fn) : p
}

上面是vue源码中nextTick的实现，为了搞清楚实现逻辑，就必须搞懂currentFlushPromise这个变量的含义，所以要从任务的调度机制开始分析

任务调度

首先这个调度机制的功能在runtime-core的scheduler文件

// 这个文件会抛出以下几个API函数
nextTick(){} // 将函数在任务队列清空后执行
queueJob(){} // 添加任务并开始执行任务队列
invalidateJob(){} // 删除任务
queuePreFlushCb(){} // 添加前置回调函数并开始执行任务队列
queuePostFlushCb(){} // 添加后置回调函数并开始执行任务队列
flushPreFlushCbs(){} // 执行前置回调函数
flushPostFlushCbs(){} // 执行后置回调函数

我们首先要知道几个关键变量

let isFlushing = false // 是否正在清空任务队列
let isFlushPending = false // 清队任务已创建，等待清空状态
const queue: SchedulerJob[] = [] // 任务队列
let flushIndex = 0 // 当前正在执行的任务在任务队列中的索引

然后我们从queueJob这个函数开始

/* 这个函数主要是将一个任务(job)进行入队操作然后在满足条件的情况下启动清空队列任务(queueFlush)*/
export function queueJob(job: SchedulerJob) {/*** 任务可入队逻辑* 1. 任务队列为空* 2. 待入队任务不能存在于任务队列中(按情况分析)*/if ((!queue.length ||!queue.includes(job,/* 在正在清空队列且当前待入队任务是可以递归时，说明当前任务一定和当前正在执行任务是同一任务，所以+1，就是为了保证待入队任务和正在执行任务相同，但不能和后面待执行任务相同*/isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) &&job !== currentPreFlushParentJob) {// 二分查找任务在队列中的位置const pos = findInsertionIndex(job)if (pos > -1) {queue.splice(pos, 0, job)} else {queue.push(job)}queueFlush()}
}

queueFlush

function queueFlush() {/**清队任务创建后禁止再次创建更多的清队任务因为在入队操作完成后，flushJobs会在一次递归中将任务队列全部清空，所以只需要一次清队任务即可*/if (!isFlushing && !isFlushPending) {isFlushPending = true/* 清队任务创建成功，并记录下当前清队任务，这个标记可以用于nextTick创建自定义函数，说明nextTick的执行时机是在清队任务后的，其实从这个地方就可以理解nextTick的执行原理了*/currentFlushPromise = resolvedPromise.then(flushJobs)}
}

flushJobs

// 清空任务队列
function flushJobs(seen?: CountMap) {isFlushPending = false // 关闭清队任务等待状态isFlushing = true // 开启正在清空队列状态if (__DEV__) {seen = seen || new Map()}// 清空前置回调任务队列flushPreFlushCbs(seen)/* 任务队列中的任务根据ID进行排序的原因1. 因为组件更新是从父组件到子组件的，而任务更新是在数据源更新时触发的，所以为了更新任务的顺序就需要进行排序2. 如果在父组件更新期间已经卸载了组件，那么子组件的更新任务就可以跳过*/queue.sort((a, b) => getId(a) - getId(b))try {// 遍历任务队列for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {const job = queue[flushIndex]if (job && job.active !== false) {if (__DEV__ && checkRecursiveUpdates(seen!, job)) {continue}// 执行当前任务callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)}}} finally {// 重置当前任务索引flushIndex = 0// 清空任务队列queue.length = 0// 执行后置回调任务队列flushPostFlushCbs(seen)// 重置清队任务的状态isFlushing = falsecurrentFlushPromise = null/* 因为清队任务执行期间也会有任务入队，所以为了清队执行完成就需要判断各任务队列的长度，然后递归执行*/if (queue.length ||pendingPreFlushCbs.length ||pendingPostFlushCbs.length) {flushJobs(seen)}}
}

总结

nextTick的执行时机是在任务队列(前置、主任务、后置)清除后的，currentFlushPromise是清队任务的promise标记
任务队列执行顺序：执行前置回调任务队列 -> 执行主任务队列 -> 执行后置回调任务队列

解析nextTick---vue3任务调度相关推荐

网络请求框架OkHttp4的使用与原理解析01：任务调度与拦截器分析
OkHttp任务调度流程: 1. OkHttpClient构建过程分析案例: OkHttpClient client = new OkHttpClient.Builder().addIntercep ...
Vue3源码解析01--Vue3初探
Vue3 源码解析 01 - Vue3 浅谈前言最近几个月一直忙于公司搬砖,导致都没有时间学习了.正好这段时间慢慢恢复了正常工作的作息,赶紧学习一下最新发布的 Vue3 框架. 为什么有 Vue3 ...
vue created 调用方法_深入解析 Vue 的热更新原理，偷学尤大的秘籍？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
SDU信息门户（10）前端vue3.0代码分析
2021SC@SDUSC 目录一.引言二.代码分析 1.答辩检查组件 2.文件系统组件 3.公告组件 4.教师发布题目组件三.总结一.引言 SDU信息门户中前端主要使用了Vue3.0的技术,这 ...
@Scheduled源码解析
文章目录 @Scheduled源码解析解析部分执行部分小结 @Scheduled源码解析解析部分定时任务调度的基础是ScheduledAnnotationBeanPostProcessor类 ...
【干货】写给初中级前端的高级进阶指南
以下文章来源于掘金开发者社区,作者晨曦时梦见兮我曾经一度很迷茫,在学了Vue.React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去.相信这也是很多一两年经验的前端工程师所遇到 ...
写给初中级前端的高级进阶指南（万字长文，建议收藏）
前言由于公众号文章不允许外链,需要跳转文中链接的同学可以在脚注里找到各个的资源链接,也可以通过点击阅读原文更加方便的跳转链接. 我曾经一度很迷茫,在学了 Vue.React 的实战开发和应用以后,好 ...
2020年 30K的前端架构面试题总结(持续更新)
vue部分 vue父子组件通信 props,$ emit , vuex , provide/inject , $ attrs/$ listeners,$root , $parent, $refs, e ...
写给初中级前端的高级进阶指南（万字路线）
前言我曾经一度很迷茫,在学了 Vue.React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去.相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者结合自己的一些 ...
2022，前端应该阅读这些文章
同学们都知道,前端圈变得越来越卷了,各种技术层出不穷,简直让人应接不暇.可能很多跟我一样,一时间,看到这个也想学,看到那个也想学,最终的结果是什么?那就是:啥都没学! 所以笔者花费了几天时间,整理了一 ...

解析nextTick---vue3任务调度

nextTick

任务调度

总结

解析nextTick---vue3任务调度相关推荐

最新文章

热门文章