const resolvedPromise = Promise.resolve();
let currentFlushPromise = null;
// nextTick() 将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。
//fn 可以不传值
function nextTick(fn) {
const p = currentFlushPromise || resolvedPromise;
return fn ? p.then(this ? fn.bind(this) : fn) : p;
}
// setup(){
// let num = ref(1)
// const changeMessage = async num => {
// num.value++
// await nextTick()
// console.log('Now DOM is updated')
// }
// }
//等到num的值发生改变后 nextTick()就会被被执行,不然的话程序会一直停在nextTick()这里
function flushJobs(seen) {
isFlushPending = false;
isFlushing = true;
{
seen = seen || new Map();
}
flushPreFlushCbs(seen);
// 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.
//刷新前对队列进行排序。
//这可确保:
// 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 (true && checkRecursiveUpdates(seen, job)) {
continue;
}
// console.log(`running:`, job.id)
// callWithErrorHandling(job, null, 14 /* SCHEDULER */);
}
}
}
finally {
flushIndex = 0;
queue.length = 0;
flushPostFlushCbs(seen);
isFlushing = false;
currentFlushPromise = null;
// some postFlushCb queued jobs!
// keep flushing until it drains.
if (queue.length ||
pendingPreFlushCbs.length ||
pendingPostFlushCbs.length) {
flushJobs(seen);
}
}
}
vue3 nextTick()
最新推荐文章于 2024-08-21 17:05:56 发布