Vue.js - 列出渲染和方法调用 - 几乎是一个无限循环

Question

我正在使用vue.js 2.3和element-ui。我需要渲染一个大约1000个项目的列表。对于每件商品，我想根据商品的tag属性显示不同颜色的availability。

问题

渲染列表时，

Vue.js变得非常慢，这是因为函数getTagType。特别是，每次单击按钮show-hide时都会调用此函数。

问题

还有其他方法可以获得更好的响应能力吗？

观

我想在后端构建type-tag但是因为它只是一个显示问题，我不知道它是否有意义。

我考虑过使用virtual-scroll或paging来减少列表，但如果可能，我会想避免使用

 <div v-for='cloth in computedCloths' class="cloth-card" :key="cloth.id">
    <div class="cloth-picture"></div>
    <div class="cloth-footer">
      <div>{{cloth.cloth_code}}</div>
      <div>
        <el-tooltip placement="top">
          <div slot="content" v-if="cloth.availability === 'qtyFull'">Full</div>
          <div slot="content" v-else-if="cloth.availability === 'qtyLow'">Low</div>
          <div slot="content" v-else-if="cloth.availability === 'qtyTempOutStock'">Out of stock</div>
          <el-tag :type="getTypeTag(cloth.availability)"><i class="el-icon-information align-center"></i></el-tag>
        </el-tooltip>
      </div>
    </div>
  </div>

getTagType(availability) {
      if(availability === 'qtyLow') {
       return 'warning';
      }
      if(availability === 'qtyFull') {
       return 'success';
      }

https://jsfiddle.net/xvq8tn9d/

来自@Bert Evans的回答

https://jsfiddle.net/xvq8tn9d/2

Answer 1

增加你的计数器导致缓慢。在getType方法中递增计数器会导致重新渲染，导致调用getType，从而导致重新渲染等。删除此行，您的代码运行速度合理。

this.counterFunction++;

更新了fiddle。

我不确定你为什么需要它。它将在表格中的每一行调用。