Динамическая / асинхронная визуализация компонентов

Question

Я довольно новичок в VueJS и уже пару дней играю с фреймворком.

Я создаю своего рода панель с внешним видом и виджетом, и у меня проблема в том, чтокогда пользователь добавляет множество виджетов на панель инструментов, возникают проблемы при загрузке страницы, поскольку виджеты одновременно выполняют вызовы API для получения подмножеств данных.

Чтобы лучше понять, что яделаю, концепция ниже.(Это краткая идея, чтобы сохранить код в чистоте и простоте).

Home.vue

<template>
  <div class="Home">
    <h1>Homepage</h1>
    <div v-for="w in widgets">
        <component :is="widget"></component>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {

    for (var i = 0; i < availableWidgets; i++) {
        widgets.push(availableWidgets);
    }

  },
};
</script>

Виджет 1

<template>
  <div class="Widget1">
    <span>Widget 1</span>
  </div>
</template>

<script>

export default {
  name: 'Widget1',
  mounted() {
    //Get data from API and render
  },
};
</script>

Виджет 2

<template>
  <div class="Widget2">
    <span>Widget 2</span>
  </div>
</template>

<script>

export default {
  name: 'Widget2',
  mounted() {
    //Get data from API and render
  },
};
</script>

Как видите, я как бы загружаю виджеты и добавляю их динамически в зависимости от того, что есть у пользователя на его панели инструментов.

У меня проблема в том, что Widget 1 и Widget 2 (вв моем случае около 20-30 виджетов), я буду выполнять вызовы API, и это прекрасно работает, когда загружены 1 или 2 виджета.Но как только страница сильно вырастет, и на ней будет около 10 виджетов, все начнет отставать.

Что бы вы предложили сделать, чтобы сделать это более производительным?Можно ли разрешить загрузку одного компонента за раз до загрузки второго компонента и т. Д.?Я думал о добавлении асинхронных вызовов, но это не помешало бы одновременной загрузке компонентов?

Ждем ваших отзывов и помощи, которую вы можете предоставить.

Answer 1

Обычным примером будет первый рендеринг без данных, а затем повторный рендеринг при каждом поступлении ваших данных. Браузер позаботится о том, чтобы не слишком много сетевых запросов выполнялось одновременно, поэтому у вас не должно быть задержкиПерсе от этого.Вы просто чувствуете задержку, потому что ваш компонент не рендерится до загрузки данных.

Я бы предложил использовать что-то вроде Axios , которое использует обещания и упрощает создание асинхронных HTTP-запросов, в то же времясохраняя ваш код читабельным.

<template>
  <div class="widget graph">
    <div v-if="loading">
      <span>Loading...</span>
      <img src="assets/loader.svg">
    </div>
    <div v-else>
      <!-- Do whatever you need to do whenever data loads in -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'WidgetGraph',

  data () {
    return {
      loading: true,
      error: null,
      graphData: {}
    }
  },

  created () {
    this.loadData();
  },

  methods: {
    loadData () {
      return axios.get(...).then((data) => {
        this.loading = false;
      }).catch(() => {
        this.error = 'Something went wrong.... Panic!';
        this.loading = false;
      });
    }
  }
}
</script>

<style>

</style>