关于事件循环,vue中nexttick实现的问题

guhuiweb
  • 385

先说一下我对整个事件循环的简单理解:
单个宏任务-》所有微任务-》浏览器UI渲染-》(一个事件循环)单个宏任务

所以我认为nexttick的callback一定是放在UI渲染之后才执行的

但今天看了一下nexttick的实现,居然是优先使用promise,那promise.then是微任务,callback执行理论上还是当前的tick内,就是浏览器还没渲染,此时nexttick的callback内取dom为什么更新了呢?

然后有两个奇怪的case

<div ref="msg">{{msg}}</div>

data(){
    return {
        msg: 1
    }
}

我在js尝试两种写法

this.msg = 2
this.nextTick(()=>{
    console.log(this.$refs.msg.innerText)
})
this.msg = 3

// 此时innerText为什么输出为3?


this.nextTick(()=>{
    console.log(this.$refs.msg.innerText)
})
this.msg = 3

// 此时innerText为什么输出为1?

回复
阅读 145
1 个回答

单个宏任务-》所有微任务-》浏览器UI渲染-》(一个事件循环)单个宏任务

这个理解不对,讲道理有的操作dom会造成重新计算,比如说你修改了css,然后获取宽高,然后又又改了css,又获取宽高。浏览器必须渲染计算才能给出你值


至于你说的 UI渲染能获取到 是两回事。 看下面这个例子,你操作了dom,内容其实已经改变,但是因为 UI 并没有渲染。

console.log(document.body.innerHTML.length)
document.body.innerHTML = ''
console.log(document.body.innerHTML.length)
now = Date.now();
while( Date.now() - now < 2000){

}
console.log(document.body.innerHTML.length)

image.png


接下来再说为什么 vue 使用的是 promise。他其实并不是在等 UI渲染,而是在等他自己修改dom。之前他使用过 setTimeout,在部分设备上渲染会晚好久(应该有个 issue)。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏