VueJs：挂载的 API 调用非常慢答案

【问题标题】：VueJs: API call in mounted very slowVueJs：挂载的 API 调用非常慢
【发布时间】：2021-12-23 13:31:45
【问题描述】：

在我的 Vue js 项目中，我遇到了 API 数据问题，页面加载速度很快，但来自 API 的数据需要超过 5 秒才能加载。但是，我的 Api 响应在控制台中非常快。在下面的代码中，我在另一个名为 API 服务的文件中实现了 api，并且我放置了一个包含我的所有 API 的类，称为 BuildingService，所以我在挂载时调用了 API，它加载缓慢有人可以帮我吗？

<script>
  import Vue from 'vue'
  import BuildingsService from "@/services/ApiService"

  Vue.use(VueClipboard)
  export default {
    data(){
      return{
buildings:[],

      }
    },
    name: 'icons',
    components: {
      BaseHeader
    },
  
    mounted:function(){
          BuildingsService.getBuildings().then((response) => {
      this.buildings = response.data.response;
      console.log(response.data.response,"dd");

    });
    }

   
   
          
      
  };
</script>

 
              <b-col lg="3" md="6"  v-for="(building, index) in buildings"
              :key="index" >
>{{building.building_number}}
   
              </b-col>

【问题讨论】：

我的猜测是您返回了大量数据并且您正在尝试渲染所有数据。换句话说，数据来自 API 请求是无关紧要的。即使你的组件中有它，渲染所有数据仍然需要很长时间。 "render" 是指浏览器创建与页面上显示的所有数据相对应的 DOM 元素所花费的时间。另请注意，使用您共享的代码无法重现您的问题。如果无法重现，没有人可以测试潜在的解决方案，因此您的问题无法回答，因此“离题”。
如果我的假设是正确的，使用 a) 某种形式的分页或 b) 一个虚拟滚动条，将解决问题。这些解决方案背后的基本原理是：浏览器窗口的屏幕空间有限。您应该只构建足够的 DOM 元素来填充该空间，并且只在用户更改页面（解决方案 a））或滚动（解决方案 b))。请注意，仅当所有滚动的子项具有相同的高度时，虚拟滚动器解决方案才是一种选择。如果不是这样，分页将是合适的解决方案。

标签： javascript vue.js

【解决方案1】：

使用创建而不是安装：

created() {
      BuildingsService.getBuildings().then((response) => {
      this.buildings = response.data.response;
      console.log(response.data.response,"dd");
    });
}

供参考：enter link description here

【讨论】：