VueJS v-针对性能问题

ffscu2ro 于 2022-12-27 发布在 Vue.js

关注(0)|答案(1)|浏览(150)

我有一个制作硬币组合的小应用程序。我从API收到了大约2000个数据调用。我试图用v-for列出它们。但在100个调用之后，我的应用程序就不能正常工作了。它冻结了。获取和列出数据需要10秒左右，当我试图搜索某个东西时，我的应用程序冻结了，用户体验很差。
我正在分享我的github repo。我的应用程序现在接收100个数据对象，它没有任何问题。以下是我正在使用的代码。

async created() {
    this.loaded = false;

    try {
      const response = await fetch(
        'https://api2.binance.com/api/v3/ticker/24hr'
      );
      const data = await response.json();
      // Get first 100 of data
      data.slice(0, 100).forEach(element => {
        this.chartData.symbols = [...this.chartData.symbols, element.symbol];
        this.chartData.price = [...this.chartData.price, +element.lastPrice];
      });

      this.loaded = true;
    } catch (e) {
      console.error(e);
    }

离开这里整洁。我分享我的GitHub repo。你可以达到所有的代码与我的Github repository和得到检查我的应用程序。

vue.js

来源：https://stackoverflow.com/questions/74914470/vuejs-v-for-performance-issue

1条答案

按热度按时间

bjg7j2ky1#

我在这里回答过类似的问题：https://stackoverflow.com/search?tab=newest&q=user%3a8816585%20pagination（最后2个答案）
TLDR：您正在使用.slice，但仍在前端加载整个对象集合。
Binance的API文档非常糟糕，因为我不能简单地引用给定的端点。

希望可以通过使用搜索功能找到。
总的来说，默认情况下您将有几个字段（如果您使用https://api2.binance.com/api/v3/ticker/24hr）aka

[
  'symbol',
  'priceChange',
  'priceChangePercent',
  'weightedAvgPrice',
  'prevClosePrice',
  'lastPrice',
  'lastQty',
  'bidPrice',
  'bidQty',
  'askPrice',
  'askQty',
  'openPrice',
  'highPrice',
  'lowPrice',
  'volume',
  'quoteVolume',
  'openTime',
  'closeTime',
  'firstId',
  'lastId',
  'count',
]

像https://api2.binance.com/api/v3/ticker/24hr?type=MINI这样传递发送MINI可以将接收到的字段数量减少到

[
  'symbol',
  'openPrice',
  'highPrice',
  'lowPrice',
  'lastPrice',
  'volume',
  'quoteVolume',
  'openTime',
  'closeTime',
  'firstId',
  'lastId',
  'count',
]

你当然也可以限制你想要得到的代币，那可能也是相当大的。
除此之外，我在API中没有看到任何与分页相关的东西，所以我猜他们并不真正关心DX，而是希望你自己去做。
因此，您可以使用后端中间件、无服务器函数或其他任何东西作为代理，将工作委托给某个后端服务器，而不是客户端应用程序。
没有魔法酱料，就像我之前在回答中解释的那样。

赞(0）回复(0）举报 2022-12-27

我来回答

VueJS v-针对性能问题

1条答案

相关问题

热门标签

最新问答