无法正确从 html 调用 vue 函数（组件渲染函数中的无限更新循环）答案

【问题标题】：Cant call a vue function from html correctly (infinite update loop in a component render function)无法正确从 html 调用 vue 函数（组件渲染函数中的无限更新循环）
【发布时间】：2019-10-31 23:40:20
【问题描述】：

当我尝试按升序或降序对数组进行排序时，控制台出现错误。

我正在使用 Vue 制作一个有序的表格，我可以用已有的数据制作一个表格。但是当我调用一个函数时，我在页面中显示了正确的结果，但在控制台中出现了错误。当我尝试编写一些代码来返回所有数组的 %10 时，例如 var i = array.lenght * 0-1" 它不起作用。

<tbody id="app" v-bind:placeholder="OrdenarMiembrosDesc(members)" required>
    <tr v-for="member in members">
    <td>{{ member.first_name }} {{member.last_name}}</td>
    <td>{{ member.total_votes }}</td>
    <td>{{ member.votes_with_party_pct }} </td>
    </tr>
</tbody>

<script>

let app = new Vue({
    el: '#app',
    data: {
        members: [] //this already have a lot of users info, and it works
    },
    methods: {
        OrdenarMiembrosAsc(miembros) {
            return miembros.sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
        },

        OrdenarMiembrosDesc: function(miembros) {
            var temp = miembros.sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
            var i = temp.lenght;
            console.log(temp);
            console.log(i);
            return temp;
        },
    }
});

</script>

除了我的变量的日志之外，我不希望有任何消息，但我有很多控制台日志，然后 "[Vue 警告]：组件渲染函数中可能存在无限更新循环。

（在中找到）"

【问题讨论】：

标签： javascript html vue.js v-for

【解决方案1】：

在渲染期间调用的任何方法（即模板中的方法调用）都不应改变反应状态，因为这将触发潜在的无限重新渲染，因此会发出警告。

members 是响应状态，您正在调用 members.sort()，它会改变数组而不是返回新数组。

简单的解决方法是先.slice()。这将执行数组的浅层克隆。

var temp = miembros
  .slice()
  .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);

更好的方法是将它们定义为计算属性而不是方法，因为它们没有理由成为方法，并且您可以获得缓存结果以提高性能的好处。

computed: {
  OrdenarMiembrosAsc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
  },

  OrdenarMiembrosDesc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
  }
}

【讨论】：