nextTick 源码解析

news/2025/4/3 2:48:05/文章来源:https://www.cnblogs.com/zsnhweb/p/18804942

Vue 3 的 nextTick 源码位于 packages/runtime-core/src/scheduler.ts 文件中,下面是简化后的源码

import { isFunction } from '@vue/shared'
import { currentFlushPromise } from './scheduler'export function nextTick<T = void>(this: T,fn?: (this: T) => void
): Promise<void> {const p = currentFlushPromise || Promise.resolve()return fn ? p.then(this ? fn.bind(this) : fn) : p
}

参数部分:
this:这里的 this 是为了保证回调函数 fn 里的 this 指向正确。
fn:是一个可选的回调函数,会在 DOM 更新完成之后执行。
核心逻辑:
const p = currentFlushPromise || Promise.resolve():currentFlushPromise 是当前的刷新 Promise,若存在,就使用它;若不存在,就创建一个已解决的 Promise。
return fn ? p.then(this ? fn.bind(this) : fn) : p:如果传入了回调函数 fn,就在 Promise 完成后执行这个回调函数,并且绑定 this;要是没传入回调函数,就直接返回 Promise
参数部分:
this:这里的 this 是为了保证回调函数 fn 里的 this 指向正确。
fn:是一个可选的回调函数,会在 DOM 更新完成之后执行。
核心逻辑:
const p = currentFlushPromise || Promise.resolve():currentFlushPromise 是当前的刷新 Promise,若存在,就使用它;若不存在,就创建一个已解决的 Promise。
return fn ? p.then(this ? fn.bind(this) : fn) : p:如果传入了回调函数 fn,就在 Promise 完成后执行这个回调函数,并且绑定 this;要是没传入回调函数,就直接返回 Promise

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/909687.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20244111 实验二《Python程序设计》实验报告

学号 2024-2025-2 《Python程序设计》实验二报告 课程:《Python程序设计》 班级: 2441 姓名: 韩金婕 学号:20244111 实验教师:王志强 实验日期:2025年4月1日 必修/选修: 公选课 1.实验内容 设计并完成一个完整的应用程序,完成加减乘除模阶乘等运算,功能多多益善。通过…

20244112 实验二《Python程序设计》实验报告

20244112 2024-2025-2 《Python程序设计》实验二报告 课程:《Python程序设计》 班级: 2441 姓名: 李其鲔 学号:20244112 实验教师:王志强 实验日期:2025年4月1日 必修/选修: 公选课 1.实验内容 (1)设计并完成一个完整的应用程序,完成加减乘除模等运算,功能多多益善;…

20244102 2024-2025-2 《Python程序设计》实验二报告

20244102 2024-2025-2 《Python程序设计》实验二报告 课程:《Python程序设计》 班级: 2441 姓名: 丁可 学号:20244102 实验教师:王志强 实验日期:2025年4月1日 必修/选修: 公选课 一、实验内容 1.设计并完成一个完整的应用程序,完成加减乘除模等运算,功能多多益善。二…

20242207 实验二 《Python程序设计》实验报告

20242207 2024-2025-2 《Python程序设计》实验二报告 课程:《Python程序设计》 班级: 2422 姓名: 赵泓睿 学号: 20242207 实验教师:王志强 实验日期:2025年3月26日 必修/选修: 公选课 1.实验内容 1.设计并完成一个完整的应用程序,完成加减乘除模等运算,功能多多益善。…

高一下四月日记

云海翻涌,尘世如歌;人间烟火常驻,心中超然长留。低眉俯瞰凡世间,存梦幻歌凭云处。4.1 闲话 做题纪要 luogu P1175 表达式的转换开两个栈辅助建后缀表达式。点击查看代码 char s[110]; deque<char>s1,s2; deque<int>s3; int val(char x) {if(x==() return 0;if(…

进阶图论

进阶图论 I. 割点与桥 首先,我们得了解割点的含义 割点对于一个无向图,如果把一个点删除后这个图的极大连通分量数增加了,那么这个点就是这个图的割点(又称割顶)。通俗点说,就是连接两个或多个连通分量的公共点。 如何求割点呢,这里引用一个算法:Ttarjan 定义 dfn[i] 为…

URAT协议自学笔记

定义 URAT(Universal Asynchronous Receiver/Transmitter)协议是一种通用异步收发传输协议,用于在两个设备之间进行串行数据通信。它将并行数据转换为串行数据进行传输,接收时再将串行数据转换为并行数据。 特点 异步通信:不需要共享时钟信号,通过波特率同步数据传输。 全…

解决手机每次复制都弹出google的nearby服务-分享到附近的设备

起因: 我的手机刷了国际版的系统,有google套件,每次复制都会唤起nearby附近分享这个组件,感觉很烦。 解决方法: 下载AppOps,这个软件能方便我们管理和监视应用权限。 使用Shizuku授权点击左上角,选择使用情况历史点击剪切板我们切出去, 在别的应用中进行一次复制,就可…

neo4j community教程

neo4j community最新版本安装教程(2025.1) 前言 ​ neo4j desktop以交互性好,体验好为优点。但是自24年中旬neo4j官网先后被墙和neo4j desktop联网打不开等诸多问题,本文作者建议使用community版本。 正文下载安装包neo4j官网,下载community最新版本(5.26.1)jdk-23下载(这…

代码随想录第四天 | Leecode 24. 两两交换链表、19.删除链表的倒数第N个节点、 面试题 02.07. 链表相交 、142.环形链表II

Leecode 24. 两两交换链表 题目链接:https://leetcode.cn/problems/swap-nodes-in-pairs/description/ 题目描述:思路:虚拟头节点,注意保存临时节点 题目解答: 循环结束的时候就是,当链表偶数个时cur->next->next=NULL,奇数个时cur->next=NULL。 Leecode 19. 删…

JpaSpecificationExecutor :Spring Data JPA 动态查询的核心扩展

JpaSpecificationExecutor 是 Spring Data JPA 动态查询的核心扩展,通过 Specification 机制提供灵活的类型安全查询,解决了传统 JPQL 或 Criteria API 的冗余问题,特别适合复杂业务场景下的动态数据访问需求。 核心设计目标: ​动态查询:允许运行时动态构建查询条件,避免…

四款高效报表软件推荐 助力企业数据可视化

概述 在数字化时代,企业和组织越来越依赖数据驱动决策,报表软件成为提高数据可视化能力、优化业务管理的关键工具。本文将为大家介绍四款功能强大的报表软件,帮助不同需求的企业找到合适的解决方案。 一、山海鲸报表 山海鲸报表是一款零代码的免费数据可视化和报表生成工具,…