Performance VUEJ显示大量数据

现在，我们在选择JavaScript框架（VueJS）时面临着一些问题。在我们自己的内部项目中，我们面临着输出更大的JSON对象的问题。（大约15000行json）

我们的计划是将这些数据放在一个表中，但是VueJS似乎有点难以快速显示如此多的信息

我们试图用普通文本字段替换输入字段，看看这是否提高了性能，我们尝试了分页，但也没有解决我们的问题

现在我们有大约20秒的加载时间，浏览器处于满载状态

所以现在亲爱的堆栈溢出，我们转向你！你有什么办法来提高加载时间吗

下面是我们如何制作桌子的一个片段

<b-table striped hover :items="filtered" :fields="columns">
          <template slot="top-row">
            <td v-for="(obj, index) in filter" v-bind:key="index">
              <template v-if="isDatetime(obj[0])">
                <vue-timepicker v-model="filters[index]"></vue-timepicker>
              </template>
              <template v-else>
                <multiselect
                  class="selects"
                  :select-label="''"
                  v-model="filters[index]"
                  :options="obj"
                  :multiple="true"
                ></multiselect>
              </template>
            </td>
          </template>
          <template v-for="field in editableFields" v-slot:[tableCell(field.key)]="{ item, index }">
            <b-form-input
              v-model="item[field.key]"
              v-bind:key="field.key"
              v-bind:class="{changed : regValues[index][field.key] !== item[field.key]}"
            />
          </template>
        </b-table>

---

看起来数据量很大，在这种情况下，我只推荐一些可以提高性能和用户友好体验的技巧。 我建议你使用加载器。 其思想是首先加载页面和组件，然后获取JSON数据

例如： 在父组件中设置数据状态

data() {
  return {
   isLoading: true,
   data: null
  }
}

axios.get('/get-big-json-data')
.then(response => {
  this.data = response.data
  this.isLoading = true
})

将加载程序图标添加到模板：

<img v-if="isLoading" src="/loader.gif">

添加负责呈现数据的子组件

<child-component v-if="data" v-show="!isLoading" :data="data" @loaded="() => isLoading = true"/>

---

如果这样做只是需要很长的时间，你可能想考虑CoDeVIEW，谢谢。

mounted() {
  this.$nextTick(() => {
    this.$emit('loaded');
  })
}