动态/异步组件渲染

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个Widget)将进行API调用，这在加载1或2个Widget时运行良好。但一旦页面变得很大，页面上就会有大约10个小部件，一切都会变得迟钝。

你建议怎么做才能让它更有性能呢？在加载第二个组件之前，是否可以允许一次加载一个组件，依此类推？我在考虑添加异步调用，但这不会阻止组件同时加载？

期待您的反馈和帮助，您可以提供。

Answer 1

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

我建议使用像Axios这样的东西，它使用promises，使创建异步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>