Question

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

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

模板（HTML）：

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

脚本（ES6）：

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');
      });

    }
  }

}

window.document.title更新顺利，线性地从0到100％，而进度条的行为不稳定，有时会逐步推进在等待5秒后，有时会从0％直接变为100％。

我对该问题的理解是，Vue.js' async updates queue限制了DOM更新，因为Javascript VM在更新进度条时必须处理大量操作。我如何规避这一限制？

更新组件数据时由异步更新队列引起的Vue.js DOM延迟

0 个答案: