Javascript &引用；组件渲染函数中可能有一个无限更新循环；Vue组件中的警告

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

<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
  }
}

{{field}}
道具：{
数据：{
类型：对象，
默认值（）{
返回{}
}
}
},
方法：{
排序（数据，参数）{
//如果我只留下“返回数据”，警告将消失
数据排序（（a，b）=>{
返回a[params.name]-b[params.name]*params.order
})
返回数据
}
}

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

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

---

这是为什么？如何修复？

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

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

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

---

嗯，这是一个警告而不是错误：p try

return data.slice（）.sort（…