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