Vue 组件中的“组件渲染函数中可能存在无限更新循环”警告

Posted 2023-02-22

【中文标题】Vue 组件中的“组件渲染函数中可能存在无限更新循环”警告

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

【发布时间】：2018-05-03 05:27:36

【问题描述】：

我正在创建一个带有排序功能的基本表格：

<template>
  <!-- more code -->
  <tr v-for="item in sortBy(data.body,  name: 'name', order: 1 )">
    <td v-for="field in item"> field </td>
  </tr>
  <!-- data.body => [ name: Group 1 ,  name: Group2 , // etc.] -->
</template>

props: 
  data: 
    type: Object,
    default () 
      return 
    
  
,

methods: 
  sortBy (data, params)  
    // the warning disappears if I only leave "return data"
    data.sort((a, b) => 
      return a[params.name] - b[params.name] * params.order
    )
    return data
  

出于某种原因，我收到了以下警告：

[Vue 警告]：组件渲染函数中可能存在无限更新循环。

为什么会这样以及如何解决？

【问题讨论】：

好吧，这是一个警告而不是错误：p 试试return data.slice().sort(......

【参考方案1】：

您收到警告是因为您在 sortBy 中更改了 data.body 的值。此数据更改将导致渲染函数再次运行。您没有获得无限循环的原因是，在第二次调用 sortBy 时，数据已经排序，导致 data.body 没有数据更改。

解决方案就是 Jaromanda X 提到的。使用 slice 将复制数组，这意味着 data.body 的值不会改变，因此不会调用重新渲染。

return data.slice().sort(....