Vue.js 警告您可能在组件渲染函数中有无限更新循环

Posted 2023-02-22

【中文标题】Vue.js 警告您可能在组件渲染函数中有无限更新循环

【英文标题】：Vue.js warns You may have an infinite update loop in a component render function

【发布时间】：2020-06-03 23:54:46

【问题描述】：

我对 Vue.js 和 Buefy 很陌生，我相信我理解为什么会发生这种情况，但不知道如何解决。

我有一个按国家/地区排序的项目合作伙伴列表，我需要输出一个带有复选框的列表（无论如何我在页面上使用 Buefy）和国家名称作为标题（仅当有一个“新”国家时）。这以浏览器执行无限循环结束（通过 console.log 验证），Vue Devtools 发出警告“您可能在组件渲染函数中有无限更新循环”。

我相信这是因为更改 prevTitle 会触发重新渲染。我知道不可能将参数传递给计算属性，并且我无法使用我发现的任何技巧来使 partner.country 在那里可用。

var app = new Vue(
    el: "#app",
    data: 
      prevTitle: ""
    ...

    methods: 
      changeCountryTitle(country) 
        if (country != this.prevTitle) 
          this.prevTitle = country;
          return true;
        
        return false;
    

<template v-for="partner in results">
    <div v-if="changeCountryTitle(partner.country)">
         partner.country 
    </div>
    <b-checkbox ... > partner.name , ...</b-checkbox>
    <br />
</template>

然后我尝试创建一个计算属性，在其中进行所有处理而不是模板中的 for 循环，并返回一个包含所有内容的字符串，包括 Buefy 标记，这将被调用

<span v-html="printPartnerList"></span>

但是那些 Buefy 标记不能正确呈现，只有 HTML 标记有效，浏览器会忽略 Buefy 标记，仅显示正常文本。

任何想法如何使它工作？暂时我会在名称等之后为每个合作伙伴打印国家/地区名称，但这不是应该的。

【问题讨论】：

什么是results？

您的方法正在根据 prevTitle 评估每个合作伙伴，以了解它是否应该从您的方法返回 true 或 false。但是您的方法会修改该变量。所以通过修改它，所有的合作伙伴都必须重新评估。

我从数据库中得到results，它是包含id、name、国家等的对象。

【参考方案1】：

v-html 不评估 Vue（或在本例中为 Buefy）组件，仅评估常规 HTML 标签。

您的第一种方法并没有那么糟糕，但是您可以在项目中添加一个计算属性，而不是调用 v-for 中的方法，以告知是否应该呈现国家/地区：

<template v-for="partner in computedResults">
    <div v-if="partner.showCountry">
         partner.country 
    </div>
    <b-checkbox ... > partner.name , ...</b-checkbox>
    <br />
</template>

新应用：

var app = new Vue(
    el: "#app",
    data: 
      // prevTitle: "" <- not needed
    ...

    computed: 
      computedResults() 
        let prevCountry = ''
        let newResults = []
        this.results.forEach(partner => 
          let showCountry = false
          if (prevCountry != partner.country) 
            showCountry = true
          
          newResults.push(
            ...partner,
            showCountry
          )
          prevCountry = partner.country
        )
        return newResults