vuetify list проблема производительности

Question

У меня есть простой массив JSON, который состоит из объекта, подобного этому

{
    "kb:esid": "779256bf333d2d11abb52e39aafff20d",
    "kb:station": "Disco935 New York's Jammer",
    "kb:description": "Playing The 70's 80's 90's Disco And Beyond",
    "kb:station_url_record": {
        "kb:url_no": "1",
        "kb:url": "http://localhost/stream",
        "kb:status_code": "A",
        "kb:bandwidth_kbps": "128",
        "kb:url_strength": "9"
    }
}

Я использую vuetify в проекте codrova для отображения списка. Список состоит из 3 строк: станция, описание и полоса пропускания. Существует также простой компонент для обозначения станции в качестве избранного.

Отображение списка занимает около 5 секунд, чтобы отобразить ~ 200 элементов. Я использую немного старый смартфон: 2 ГБ памяти, 5,1 Android, процессор ~ 1,2 ГГц.

Как я могу увеличить скорость рендеринга? Я попытался найти список бесконечности в vuetify, но ничего о нем нет.

Спасибо.

Answer 1

Vue.js немного тяжел для загрузки, однако вы можете использовать отложенную инициализацию, внедрив компонент бесконечной прокрутки.Существует реализованный компонент, который называется vue-mugen-scroll .Он также имеет ссылку CDN , если вам нужен быстрый тест.

Просто замените метод getStations на ваш асинхронный серверный вызов, и все готово.Проверьте этот фрагмент, чтобы увидеть, как он работает.

let vm = new Vue({
  el: '#vue-instance',
  data: {
    stations: [],
    loading: false,
  },
  created() {
    this.getStations();
  },
  methods: {
    getStations() {
      for (let i = 0; i < 16; i++) {
        const count = this.stations.length + i;
        this.stations.push({
          esid: '779256bf333d2d11abb52e39aafff20d' + count,
          name: 'Station ' + count,
          description: 'Station Description ' + count,
          record: 'Station Record ' + count,
        });
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-mugen-scroll@0.2.5/dist/vue-mugen-scroll.min.js"></script>
<div id="vue-instance" class="container">
  <div class="row">
    <div class="col-sm-6" v-for="(station, index) in stations">
      <div class="card m-4" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title">{{ station.name }}</h3>
          <p>{{ station.esid }}</p>
          <p>{{ station.description }}</p>
          <p>{{ station.record }}</p>
        </div>
      </div>
    </div>
  </div>
  <mugen-scroll :handler="getStations" :should-handle="!loading">
    loading...
  </mugen-scroll>
</div>