VueJS:呈现期间无法更新进度加载器

Question

我有一个Vue应用程序，它加载了多达15个不同的透视表与大量数据。

整个渲染时间大约需要15秒。

在这段时间内，我真的想显示一个进度条100 %。

但不幸的是，我不能在渲染过程中更新进度条。

它不知何故被阻塞了。

你有什么建议来解决这个问题？

代码如下所示：

   <template
          v-for="n in (numberOfPivotTables - 1)"
      >
        <!-- Pivot table #1: spot count / ad count -->
        <mdb-col
          sm="12"
          md="12"
          lg="6"
          xl="6"
          :key="n"
        >

          <div class="pt-5 mx-3 pb-5 pr-5">

            <div style="height:350px">
              <h5>{{customPivotOptions[n]['reducerKey']}}</h5>

              <channel-filters
                :hour-options="filters.hour[n]"
                :adtype-options="filters.adType[n]"
                :length-options="filters.spotLength[n]"
                :creative-options="filters.motive[n]"
                :weekday-options="filters.weekday[n]"
                :flight-options="filters.flightId[n]"
                :month-options="filters.month[n]"
                :product-options="filters.product[n]"
                :station-options="filters.station[n]"
                :pivot-table-id="String(n)"
                @getValue="getSelectValue"
              >
              </channel-filters>

              <mdb-row>
                <mdb-col
                  cols="12"
                  sm="2"
                >
                  <mdb-select selectAll search 
                    @getValue="setReducerKey" 
                    :options="customPivotOptions[n].reducerOptions"
                    label="Value" 
                    :arrayId="String(n)"
                    modelName="reducerKey"
                    :visibleOptions="10"
                    placeholder="Choose your Value" /> 
                </mdb-col>
              </mdb-row>
            </div>

            <pivot-table
                :headline="customPivotOptions[n]['reducerKey']"
                :data="pivotData[n].data"
                :pivot-table-id="String(n)"
                :fields="fields[n]"
                :available-field-keys="customPivotOptions[n].availableFieldKeys"
                :row-field-keys="customPivotOptions[n].rowFieldKeys"
                :col-field-keys="customPivotOptions[n].colFieldKeys"
                :default-show-settings="defaultShowSettings"
                :reducer="getReducerKey"
                @getValues="getPivotValues"
                :sum-row="true"
                :sum-column="true"
                :sum-column-custom="{}"
                >
            </pivot-table>

          </div>

        </mdb-col>

            <div v-if="n==7" v-bind:key="n" class="w-100"></div>

      </template>

Answer 1

Vue呈现是JS执行。当JS执行时，浏览器没有渲染(更新屏幕)，所以应用程序看起来冻结了。

绕过它的方法是简单地不要同时渲染所有的东西。requestAnimationFrame应用编程接口在这里非常有用。以下代码基于与Guillaume Chau (Vue核心团队成员) (GitHub repo with code)的9 Performance Secrets Revealed谈话

首先，我们创建一个可重用的混合(返回混合的工厂函数)：defer.js

export default function (count = 10) {
  // @vue/component
  return {
    data () {
      return {
        displayPriority: 0,
      }
    },

    mounted () {
      this.runDisplayPriority()
    },

    methods: {
      runDisplayPriority () {
        const step = () => {
          requestAnimationFrame(() => {
            this.displayPriority++
            if (this.displayPriority < count) {
              step()
            }
          })
        }
        step()
      },

      defer (priority) {
        return this.displayPriority >= priority
      },
    },
  }
}

这个混入将displayPriority计数器添加到你的组件中。它从0开始，每次浏览器准备渲染新帧(重新绘制屏幕)时，它都会增加，直到它达到count (作为参数传递给工厂函数-默认值10)。

重要的部分是defer()函数。它简单地将其参数与displayPriority进行比较，并返回true/false。例如，当浏览器第一次重新绘制屏幕时(在呈现组件之后)，defer(2)将返回false，并在页面生命周期的其余部分返回true。

因此，带有v-if="defer(2)"的组件将在带有v-if="defer(3)"的组件之前呈现(第一次)，等等。

现在很容易将组件的各个部分的渲染“拆分”成多个阶段：

<template>
  <div>
    <template v-for="n in (numberOfPivotTables - 1)">
 
      <heavyComponent v-if="defer(n)" :key="n" />

    </template>
  </div>
</template>

<script>
import Defer from 'defer'

export default {
  mixins: [
    Defer(),  // pass number of steps as an argument. Default is 10
  ],
}
</script>