如何创建自己公司网站,代码外包平台,深圳网站建设案,微信关联网站如题#xff0c;nextTick的回调是在下一次事件循环被执行的吗#xff1f;
是不是下一次事件循环取决于nextTick的实现#xff0c;如果是用的微任务#xff0c;那么就是本次事件循环#xff1b;否则如果用的是宏任务#xff0c;那么就是下一次事件循环。
我们看下Vue3中…如题nextTick的回调是在下一次事件循环被执行的吗
是不是下一次事件循环取决于nextTick的实现如果是用的微任务那么就是本次事件循环否则如果用的是宏任务那么就是下一次事件循环。
我们看下Vue3中nextTick的源码
export function nextTickT void, R void(this: T,fn?: (this: T) R,
): PromiseAwaitedR {const p currentFlushPromise || resolvedPromisereturn fn ? p.then(this ? fn.bind(this) : fn) : p
}可以看到它的实现就是使用Promise所以妥妥的微任务所以nextTick的回调一定是在当前事件循环的微任务阶段被执行的而不是下一次事件循环。
但是在之前的版本中nextTick可能会使用setTimeout源码我们就不贴了。既然使用了setTimeout就是宏任务那自然就是下一次事件循环了。
可能是因为nextTick这个名字已经深入人心所以Vue并没有要更改的意思。
那么接下来问题来了
既然nextTick是本次事件循环也就是说页面还没有渲染那么为什么nextTick的回调可以获取到计算后的DOM结果呢
这个问题真的困扰了我一段时间
然后我做了个实验实验代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/head
bodybutton onclickdoClick()点击/buttonh1Hello/h1
scriptfunction doClick() {document.querySelector(h1).innerText Hialert(document.querySelector(h1).innerText)}
/script
/body
/html这是纯HTML代码不是Vue的代码。
你猜一下点击完按钮会发生什么
结果如下 点击确定后 我们来解释一下为什么是这个结果。
首先我们点击按钮触发了doClick事件这是一个宏任务。我们在这个宏任务中修改了h1的元素内容为Hi这是一个同步操作所以DOM的计算是立刻发生的。因此我们接下来通过alert正确打印了更新后的内容Hi。但是alert阻止了浏览器的渲染所以页面看到的还是Hello。当我们点击确定之后宏任务doClick执行结束浏览器开始渲染页面的内容也被更新成了Hi。
总结下来就一句话就是DOM的计算是立刻发生的所以可以立刻获取到结果但是渲染是异步的。
回到nextTicknextTick为啥能获取到计算后的DOM结果呢
原因就是nextTick是在异步更新队列之后执行此时真实的DOM操作已经执行了所以就可以读取到计算后的DOM结果了。
跟nextTick是不是下一次事件循环没有关系跟浏览器是不是已经渲染了没有关系。
