Javascript VueJS:Can'；在渲染期间更新进度加载程序

我有一个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>

{{customPivotOptions[n]['reducerKey']}

Vue渲染是JS执行。当JS执行时，浏览器不会呈现（更新屏幕），所以应用程序看起来是冻结的

解决方法就是不要同时渲染所有内容

requestAnimationFrame

API在这里非常有用。以下代码基于与Guillaume Chau（Vue核心团队成员）的谈话（）

首先，我们创建一个可重用的mixin（返回mixin的工厂函数）：

defer.js

导出默认函数（计数=10）{
//@vue/component
返回{
数据（）{
返回{
显示优先级：0，
}
},
挂载（）{
这个文件名为runDisplayPriority（）
},
方法：{
runDisplayPriority（）{
常数步长=（）=>{
requestAnimationFrame（（）=>{
这是显示优先级++
if（this.displayPriority=优先级
},
},
}
}

此mixin将

displayPriority

计数器添加到组件中。它从0开始，每次浏览器准备渲染新帧（重新绘制屏幕）时都会增加，直到达到

计数（作为参数传递给工厂函数-默认值10）

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

因此，具有
v-if=“defer（2）”
的组件将在具有
v-if=“defer（3）”
的组件之前呈现（第一次）

现在可以很容易地将组件部分的渲染“拆分”为多个阶段：


从“延迟”导入延迟
导出默认值{
混合：[
Defer（），//将步数作为参数传递。默认值为10
],
}
Levy非常感谢！对我来说，延迟（i）不是100%清楚。参数“i”的确切含义是什么？在视频中，周纪尧姆提到“我”是一个框架。但他为什么要用2和3来表示“i”？查看mixin的定义，似乎使用了requestAnimationFrame（）。@Levy我也实现了mixin，但到目前为止，我没有看到任何性能改进。传递到
defer（）
的数字或多或少是“在哪个帧（从组件第一次渲染时起）此组件应该可见”它可以工作-嗯，我已经用下面的方式添加了代码，但我没有得到任何加载改进：