您可能在组件渲染函数错误中存在无限更新循环 - 解决方案？

Question

出现错误“您可能在组件渲染函数中有无限更新循环。”完全不知道该怎么办？

我尝试将数组设为数据值。另外，我尝试过使用 for 循环。在第一种方法中似乎是孤立的。

data() {
  return { 
      activeTab: 0,
      uniqueLobs: []
    }
},
methods: {
    addDollarSymbol(val){
        var newVal = "$" + val;
        return newVal.replace(/<(?:.|\n)*?>/gm, ''); //trims white space
    },
    removeDuplicateLOB(lineOfBusiness) {
        //removes duplicate LOBs for tabs
        let incomingLobs = [];
        lineOfBusiness.forEach((business) => {
        incomingLobs.push(business.line_of_business.name);
        });
        this.uniqueLobs = [...new Set(incomingLobs)];
        return this.uniqueLobs;
    },
    showSpecificLobData(activeTab){
        //compares tab LOB to all incoming card data and shows only the LOB data for that specific tab
        let activeTabData = [];
        this.product_rate_card.forEach((product) => {
            if (product.line_of_business.name == this.uniqueLobs[activeTab] ) {
                activeTabData.push(product);
            }
        });
        return activeTabData;
    }
}

Answer 1

本例中的“循环”指的是无限递归，而不是for 循环。

该警告记录在这里：

https://github.com/vuejs/vue/blob/ff911c9ffef16c591b25df05cb2322ee737d13e0/src/core/observer/scheduler.js#L104

大部分代码的作用可能不是很明显，但代码的关键部分是 if (circular[id] > MAX_UPDATE_COUNT) { 行，它检查特定观察者是否已被触发超过 100 次。

当响应式数据发生变化时，它将导致依赖于该数据的任何组件重新渲染。如果渲染过程更改了相同的数据，则将再次触发渲染。如果数据永远不会稳定，那么这将永远持续下去。

这是一个触发该警告的组件的简单示例：

<template>
    <div>
        {{ getNextCount() }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 1
        }
    },

    methods: {
        getNextCount () {
            this.count++

            return this.count
        }
    }
}
</script>

模板依赖于count，但通过调用getNextCount，它也会改变count的值。当该值更改时，组件将重新添加到渲染队列，因为依赖项已更改。它永远无法摆脱这个循环，因为价值不断变化。

由于您没有发布足够的代码，我无法确定是什么导致您的组件出现此问题。但是，它可能类似于this.uniqueLobs = ... 行，假设它在渲染期间被调用。一般来说，我建议避免在渲染阶段更改this 上的任何内容。渲染应该是只读的。通常，您会对要保留的任何派生数据使用计算属性。