您可能在组件呈现功能中有一个无限的更新循环

Question

我是VueJS的新手,我收到Vue的警告,

[Vue warn]: You may have an infinite update loop in a component render function. 

当我在V-bind:style中使用V-for变量时,这是一个例子:在模板中:

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>

在脚本中:

data() {
    return {
        accept: false,
        not_accept: false,
    };
},
methods: {
    test(result) {
        if (result == 'accept') {
            this.accept = true;
            this.not_accept = false;
        } else if (result == 'Not accept') {
            this.accept = false;
            this.not_accept = true;
        } else {
            console.log(result);
        }

        return {
            success: this.accept,
            danger: this.not_accept,
        };
    },
},

Answer 1

我无意中做了类似的事情，但用未经训练的眼睛并不容易发现：调用.sort()过滤器中的数组。sort改变数组，从而使组件重新渲染。解决方案是首先slice对数组进行浅拷贝，然后进行排序。

坏的：

 filters: {
    sortedDays(days) {
      return days.sort().join(', ');
    },
  },

好的：

 filters: {
    sortedDays(days) {
      return days.slice().sort().join(', ');
    },
  },

Answer 2

@Decade对这个问题是正确的.这是确切的问题:

1. 您在渲染方法中使用某个状态值呈现项目列表

注意:只要状态发生任何变化,就会触发render方法

2. 然后你试图根据函数的结果绑定类test这个函数是有缺陷的,因为它再次试图改变状态,从而导致渲染 - 测试 - 渲染周期.

您可以通过使测试函数不改变状态来解决此问题,如下所示:

methods: {
    test(result) {
        let accept;
        if (result == 'accept') {
            accept = true;
        } else if (result == 'Not accept') {
            accept = false;
        } else {
            console.log(result);
        }

        return {
            success: accept,
            danger: !accept,
        };
    },
}

我希望有所帮助!

Answer 3

首先,我不确定你为什么not_accept,不能只是!this.accept在它的位置使用？

我不是100%肯定你为什么会收到这个警告,但这就是我的想法.

观察者v-bind:class正在观察变化item.result,this.accept和this.not_accept.这些值的任何更改都将导致通过test再次调用重新呈现它.但中test,你正在修改this.accept和this.not_accept,所以Vue公司需要再次重新检查,如果结果已经因为这个改变,这样做可能会改变this.accept,并this.not_accept 再次,等等.

该class绑定和数据是有缺陷的.class对于每个项目将设置为相同的东西,但它看起来好像你想要每个项目的自定义样式取决于item.result.你真的不应该修改this内部的任何属性test.

很难给出一个彻底的答案,因为我不完全确定你的组件如何工作以及它应该做什么.

Answer 4

如果调用函数而不是在 vue 指令中传递函数，则会出现此错误。下面是一个例子：

当显示 boostrap 选项卡时，我创建了一个自定义指令以通过 AJAX 加载数据。

这不好：

 v-on-show-bs-tab="getFirstPageSites()"

在这里，vue 似乎调用了函数（或者更确切地说是计算表达式）并将结果传递给指令。

这很好：

 v-on-show-bs-tab="getFirstPageSites"

在这里，我按名称传递函数，以便我可以在指令中调用它。