Javascript 循环连续时，不会更新DOM

在一个困难的循环之前分配的变量。javascript上的值已更改。但在循环结束时，dom端的值发生了变化。 无法显示加载div。 循环继续时，如何显示加载div

var vm=new Vue({
el:“#应用程序”，
数据：{
加载：false，
},
方法：{
运行（）{
这是。加载=真；
console.log（this.loading）；
对于（设i=0；i<100000000；i++）{}
这一点：加载=错误；
console.log（this.loading）；
},
runWithAsync（）{
vm.loading=true；
console.log（this.loading）；
新承诺（功能（解决、拒绝）{
对于（设i=0；i<100000000；i++）{}
决心（正确）；
})。然后（（结果）=>{
vm.loading=false；
console.log（this.loading）；
})
},
runWithAsyncTimeout（）{
这是。加载=真；
console.log（this.loading）；
setTimeout（函数（）{
新承诺（功能（解决、拒绝）{
对于（设i=0；i<100000000；i++）{}
决心（正确）；
})。然后（（结果）=>{
这一点：加载=错误；
console.log（this.loading）；
})
}.bind（这个），100）
}
}
})

。正在加载{
宽度：100%；
高度：100vh；
背景：#ccc；
}

跑
runWithAsync
runWithAsyncTimeout
更改加载{{loading}

在考虑了一会儿之后，我以

onRender

函数的形式提出了一个出色的解决方案

Vue有一个异步更新机制，您可以在使用

Vue.nextTick

或

vm.$nextTick

调整数据后等待该机制（查看模型实例函数）。但这会在DOM已更改但尚未呈现后执行回调。如果然后

requestAnimationFrame

，则在下一次渲染之前结束。此时，请求另一个动画帧将导致代码运行到下一帧渲染之前，因此最终将进行渲染：

//这太愚蠢了。
const onRender=回调=>
Vue.nextTick（（）=>
requestAnimationFrame（（）=>
requestAnimationFrame（回调））；
var vm=新的Vue({
el:“#应用程序”，
数据：{
加载：false，
},
方法：{
运行（）{
这是。加载=真；
console.log（this.loading）；
onRender（（）=>{
对于（设i=0；i<100000000；i++）{}
这一点：加载=错误；
console.log（this.loading）；
});
}
}
})

。正在加载{
宽度：100%；
高度：100vh；
背景：#ccc；
}

跑
更改加载{{loading}

此外，尝试将长时间运行的任务卸载到工作人员中。