在 Vue 中渲染多个组件时显示加载

Question

我有一个问题，我根据页面顶部选择的类别加载多个 Vuetify 卡组件。

问题是，如果数组渲染 +50 卡，则加载需要大量时间。我不介意加载时间，但我不喜欢页面在渲染过程中卡住并且我不能使用加载指示器。

我已经尝试在这里模仿这个问题：

https://jsfiddle.net/owa1czqx/2/

<script src="https://unpkg.com/vue"></script>

<div id="app">  
  <button v-for="cat in cats" :key="cat" @click="catSelected(cat)">{{cat}}</button>
  <p v-for="item in items">{{ item }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    cats: ['cat 1', 'cat 2'],
    items: []
  },
  methods: {
    catSelected(newCat) {
      this.items = []
        for (let i = 0; i <= 50000; i++) {
        this.items.push(i + '. ' + newCat)
      }
    }
  }
})

我想要的是在新卡片呈现之前向用户提供反馈。如果我加载数据，是否可以像我异步获取一样以某种方式异步渲染？

不幸的是，分页或自动滚动加载在我的情况下不是有效的解决方案，因为它会破坏设置的布局。

Answer 1

您可以修改解决方案以显示进度。另外，不要在循环中隐藏loading，完成后立即执行。修改方法在the fiddle:

一个方法通过超时调用loadSet（我不知道为什么$nextTick 不能以同样的方式工作）。

timedLoadSet(newCat, offset, step) { 
  var vm = this;
  setTimeout(function() { vm.loadSet(newCat, offset, step); }, 1);
},

另一个加载东西

loadSet(newCat, offset, step) {
  for (let i = offset; i < offset + step && i < this.count; i++) {
    this.items.push(i + '. ' + newCat);
  }
  this.loaded = Math.round(this.items.length / this.count * 100);

  if(this.items.length === this.count) {
    this.loading = false;
  } else {
    this.timedLoadSet(newCat, offset + step, step);
  }
},

还有一个，启动第一次加载。

catSelected(newCat) {
  this.loading = true;
  this.loaded = 0;
  this.items = [];
  var step = Math.round(this.count / 100);

  this.timedLoadSet(newCat, 0, step);
}

Answer 2

找到了解决方法。这将在呈现所有组件时显示用户加载消息。

只有一个问题，用户交互在渲染过程中被禁用，但至少给出了正在加载的反馈。

无论如何，这解决了我的问题，因为我的加载时间约为 0.5-1 秒，如果用户知道正在加载某些内容，这不会打扰用户。

<script src="https://unpkg.com/vue"></script>

<div id="app">  
  <button v-for="cat in cats" :key="cat" @click="catSelected(cat)">{{cat}}</button>
  <p v-if="loading">Loading...</p>
  <p v-else v-for="item in items">{{ item }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    cats: ['cat 1', 'cat 2'],
    items: [],
    loading: false
  },
  methods: {
    catSelected(newCat) {
        const that = this
        that.loading = true
      setTimeout(function() {
        that.items = []
        for (let i = 0; i <= 50000; i++) {
          that.items.push(i + '. ' + newCat)
          that.loading = false
        }
      },0)
    }
  }
})

https://jsfiddle.net/0k8eyb4m/22/