javascript - Vue组件中的"You may have an infinite update loop in a component render function"警告

Question

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

<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 warn]: You may have an infinite update loop in a component render function.

为什么会这样，如何解决？

Answer 1

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

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

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