动态/异步组件渲染答案

【问题标题】：Dynamic / Async Component Render动态/异步组件渲染
【发布时间】：2019-07-21 11:50:50
【问题描述】：

我对 VueJS 还是很陌生，并且已经在这个框架上玩了几天了。

我正在构建一种基于小部件的外观和感觉的仪表板，我遇到的问题是，当用户向仪表板添加大量小部件时，由于小部件同时调用，因此页面加载会出现问题到 API 以检索数据子集。

为了让您更好地理解我在做什么，概念如下。（这是保持代码简洁的一个简短想法）。

主页.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>

如您所见，我正在加载小部件并根据用户在其仪表板中的内容动态添加它们。

我遇到的问题是小部件 1 和小部件 2（在我的情况下大约有 20-30 个小部件）将进行 API 调用，并且在加载 1 或 2 个小部件时可以正常工作。但是一旦页面增长很多并且页面上会有大约 10 个小部件，一切都会开始滞后。

您建议采取哪些措施来提高性能？是否可以在加载第二个组件之前允许一次加载一个组件，依此类推？我正在考虑添加异步调用，但这不会阻止组件同时加载？

期待您的反馈和您能提供的帮助。

【问题讨论】：

不，异步调用不应该破坏你的代码
嗯，但异步调用并不能单独解决问题..
他们肯定会让你的代码更快。您可以尝试一下，然后在此处跟进结果

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

一种常见的模式是让第一次渲染没有数据，然后在数据进入时重新渲染。浏览器将确保不会同时运行太多网络请求，因此您不应该有延迟从那开始。您只是感觉到延迟，因为您的组件在数据加载之前不会呈现。

我建议使用Axios 之类的东西，它使用 Promise 并可以轻松创建异步 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>

【讨论】：