我需要使用对象的属性对 Vue 中的对象数组进行排序，但 Vue 进入无限循环进行排序

Question

vue js 使用属性对对象数组进行排序，并尝试使用另一个属性对已排序的数组进行排序，但 Vue 进入排序的无限循环

chatRoomArraySorted: function() {
    console.log("func name chatRoomArraySorted");

    function compare(a, b) {
        if (a.name < b.name)
            return -1;
        if (a.name > b.name)
            return 1;
        return 0;
    }

    return this.chatRoomsArray.sort(compare);
}

sortedArray: function() {
    this.log("sortedArray");

    function compare1(a, b) {
        return new Date(b.lastMsg.createdAt) - new Date(a.lastMsg.createdAt);
    }

    return this.chatRoomsArray.sort(compare1);
},

Answer 1

每当计算属性所依赖的任何属性的值发生变化时，计算属性都会更新，这意味着定义函数将被再次调用。

由于您正在调用sort()两个chatRoomsArray计算属性中的属性，因此您正在改变chatRoomsArray数组本身，从而触发两个计算属性的更新。每次运行每个计算属性的函数时都会发生这种情况，从而创建无限循环。

您需要做的是返回chatRoomsArray每个计算属性的排序副本，而不实际对数组本身进行排序。

concat()您可以通过像这样调用来创建数组的副本：

return this.chatRoomsArray.concat().sort(compare);

您还可以使用扩展语法来制作副本，如下所示：

return [...this.chatRoomsArray].sort(compare);