Javascript 更新组件数据时异步更新队列导致的Vue.js DOM延迟

我有一个上传模块，它将大量文件加载到内存中（没有实际的上传），并使用内存密集型功能处理它们。对于大约300Mb的文件，处理功能大约需要5秒钟才能完成

我的处理函数有一个进度回调，它在处理的每个切片上都被调用，并以浮点进度指示器作为参数。（简化的）vue.js组件如下所示：

模板（HTML）：

<div class="progress" v-bind:style="{ width: progress + '%' }"></div>

export default {

  name: 'Dropzone',

  data () {
    return {
      progress: 0
    }
  },

  methods: {
    onDrop (e) {

      let $vm = this;
      let files = e.target.files;

      loadFunction(files, function progressCb (progress) {

        // This lags
        $vm.progress = Math.round(progress * 100);

        // also tried explicit data setting:
        //   $vm.$set('progress', Math.round(progress * 100));

        // also tried manual updating:
        //   document.querySelector('.progress').style.width = Math.round(progress * 100) + '%';
        //   or: $('.progress').css('width', Math.round(progress * 100) + '%');

        // But this works without lag:
        window.document.title = Math.round(progress * 100);


      }, function doneCb () {
        alert('done');
      });

    }
  }

}

窗口.document.title

更新进展顺利，从0%到100%呈线性变化，而进度条的行为则不稳定，有时以27%的步幅前进，有时在等待5秒后从0%直线上升到100%

---

我对这个问题的理解是，由于Javascript虚拟机在更新进度条时必须处理大量操作，DOM更新受到限制。如何绕过此限制？

如何使用

loadFunction（）

工作？它真的是异步的吗？单个文件是否在单个异步调用中处理？我认为但不能保证（双关语不是故意的），如果您将每个文件包装成一个单独的承诺，将所有文件包装成

promise.all（）

，并在每个承诺中增加进度值

then（）

？@LinusBorg遗憾的是，它是真正异步的，并且在内部使用承诺：（但我很好奇，您认为当DOM延迟时，

窗口.document.title

更新正常的原因是什么？我认为您的处理需要暂停，并使用setTimeout定期继续，以便事件循环退出一段时间，浏览器可以花时间进行DOM更新。

loadFunction（）是如何实现的？）

work？它真的是异步的吗？单个文件是否在单个异步调用中处理？我想但不能保证（双关语不是有意的），如果你将每个文件包装成一个单独的承诺，将所有文件包装成

promise.all（）

，并增加每个承诺的进度值

然后（）

？@LinusBorg遗憾的是，它确实是异步的，并且在内部使用了承诺：（但我很好奇，您认为当DOM延迟时，

window.document.title

更新良好的原因是什么？我认为您的处理需要暂停，并使用setTimeout定期继续，以便事件循环退出一段时间，浏览器可以花时间进行DOM更新。