1. 报错代码

<ul>
  <li
    v-for="item in rankList"
    :key="item.ID"
  >
    <sparklineBar
        :data="item.priceList.reverse()"
        :limit="item.priceList.length"
    />
  </li>
</ul>

运行上述代码时，vue报错：You may have an infinite update loop in a component render function.

2. 解决方法：

此处仅列出一种解决方法，其他方法可以通过下面的报错解析自行实现

<ul>
  <li
    v-for="item in rankList"
    :key="item.ID"
  >
    <sparklineBar
        :data="getPriceList(item.priceList)"
        :limit="item.priceList.length"
    />
  </li>
</ul>

methods: {
    getPriceList(data){
      // 此操作防止改变原数据造成vue渲染死循环
      let price = JSON.parse(JSON.stringify(data))
      return price.reverse();
    }
}

3. 报错解析

报错内容翻译为中文即：您可能在组件渲染函数中有一个无限循环的更新。

因为在 JS数组方法中 reverse 操作会改变原数组（rankList），造成 v-for 重新渲染
而 item 每执行一次 reverse 就导致组件重新渲染一次，因此造成无限循环的更新。

所以我们要保证不改变原数据（rankList）的情况下渲染正确的数据：

就需要 getPriceList 方法返回一个 新数据 来完成；
方法有很多种，师父领进门，修行靠个人，具体实现还需自己查看教程摸索：

1. 可以选择去 数组方法中 寻求其他反转数组的方法，
2. 也可以选择 对原数据深拷贝 之后再进行 reverse 操作来完成

我的个人博客有空来坐坐

https://www.wangyanan.online