如何在方法运行时更新 DOM？答案

【问题标题】：How can I update DOM while a method is running?如何在方法运行时更新 DOM？
【发布时间】：2019-03-08 21:33:40
【问题描述】：

我正在编写一个在客户端工作的简单工具。基本上，用户输入一个文件，按下一个按钮来启动它，它会处理它（大约需要 10-15 秒），然后它会将修改后的文件返回。

不幸的是，当他们按下按钮启动方法时，DOM 直到方法完成才更新，所以直到全部完成都没有反馈，这很令人沮丧。

在模板部分，我有：

<p v-if="processingStatus==1">Processing data...</p>

“processingStatus”变量默认设置为 0。

在“processData”方法中，当按钮被按下时调用，它以

开头

this.processingStatus = 1

然后继续处理数据。

不幸的是，“处理数据...”标签在方法完成之前不会显示。如何在方法运行时强制 VueJS 渲染 DOM？

【问题讨论】：

processData 是做什么的？
它遍历一个巨大的数组，在另一个数组中搜索该数组中的元素，如果找到它们就删除它们。都是客户端。
我的猜测是您正在更改 processingStatus 内 if 的值，它具有不同的范围。如果我在函数内部但在任何 if 语句之外为 this 创建一个变量，它对我来说很好。供您参考jsfiddle.net/gilango/j0u14675
啊，我没有在 setTimeout 函数中运行。这样做解决了它，谢谢！

【解决方案1】：

根据您所说的 processData 正在做的事情（遍历数组中的一堆数据），我的猜测是它没有运行异步并且在完成之前锁定了 javascript 线程。

您需要做的是在processData 中像您一样设置正在处理的变量，然后在promise 或其他机制中执行所有实际工作以释放控制并更新UI。

你也可以打电话

vm.$forceUpdate();

在开始所有阵列工作之前。

【讨论】：