为什么Vue会提示组件渲染函数可能存在无限更新循环警告？

问题根因 #

你收到的Vue警告翻译为：组件渲染函数中可能存在无限更新循环，触发警告的核心原因如下：

• 你写的getResultClass即便放在computed配置中，本质是返回了一个可执行函数，在模板渲染:class绑定的时候会实时执行这个函数
• 函数内部直接修改了响应式变量this.challengeResult，修改响应式状态会触发组件重新渲染，重新渲染又会再次执行这个函数修改状态，Vue检测到这个潜在的循环逻辑就抛出了警告
• 你之前采用的computed返回函数的写法，并没有发挥computed的缓存效果，本质和直接在模板调用methods的执行逻辑完全一致，所以没有解决问题
• 额外逻辑问题：你模板里渲染的{{ challengeResult }}是全局单一变量，但你在v-for循环里给它赋值，最后这个值只会是最后一条invite的计算结果，不符合列表渲染的预期

修复方案 #

你不需要全局的challengeResult变量，直接给每条invite计算对应的结果即可，有两种常用实现方式：

方案1：改为纯函数methods（无状态修改，适合小列表） #

把getResultClass移到methods配置中，去掉对this.challengeResult的赋值，结果直接在模板里计算展示：
模板代码：

.battle__invite(v-for='(invite, index) in invites', :key='index')
  battle__result.battle__result--finished(         
      :class='getResultClass(invite.challengerScore, invite.challengedScore)'
    ) {{ getResultClass(invite.challengerScore, invite.challengedScore) }}

对应JS代码：

methods: {
  getResultClass(challengerScore, challengedScore) {
    if (challengerScore > challengedScore) {
      return 'win'
    } else if (challengerScore < challengedScore) {
      return 'defeat'
    } else {
      return 'draw'
    }
  }
}

方案2：预计算带结果的列表（性能更优，适合大列表） #

用computed直接生成带结果标识的invite列表，模板直接取值即可，可发挥computed的缓存能力：
对应JS代码：

computed: {
  processedInvites() {
    return this.invites.map(invite => {
      let result = 'draw'
      if (invite.challengerScore > invite.challengedScore) {
        result = 'win'
      } else if (invite.challengerScore < invite.challengedScore) {
        result = 'defeat'
      }
      return { ...invite, result }
    })
  }
}

模板改为遍历预计算后的列表：

.battle__invite(v-for='(invite, index) in processedInvites', :key='index')
  battle__result.battle__result--finished(         
      :class='invite.result'
    ) {{ invite.result }}

内容的提问来源于stack exchange，提问作者Kali