javascript - Vue 警告无限循环，除非我创建对象的副本

Question

我试图在渲染之前在嵌套的 v-for 循环中对对象进行排序。我弄清楚了排序，当我将它记录到控制台时，我可以看到它正在工作，但是当我返回对象 chips 时，我收到警告:

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

如果我创建该对象的副本，对其进行排序并返回 chipsCopy，它工作正常，并且没有警告。很酷，但这似乎是多余的。有什么我可以做的，这样我就不需要制作副本而不打乱 Vue 的渲染了吗？

Vue:

<div
    v-for="attachment in attachments"
    :key="attachment.attachment"
    :sort-by="attachment.attachmentDescription">
    <div>{{ attachment.attachment }}</div>
    <div>{{ attachment.attachmentDescription }}</div>
    <div
        v-for="(corsp, indx) in alphaOrder(attachment.correspondenceTemplateList)"
            :key="`${indx}-${attachment.attachment}-${corsp.categoryCode}-${corsp.letterCode}-${corsp.orgCode}`">
        <v-chip
            @click="gotoLetter(corsp.letterCode,corsp.orgCode)">
            {{ corsp.letterCode }}-{{ corsp.orgCode }}
        </v-chip>
    </div>
</div>

JS:

methods: {
    alphaOrder(chips) {
        // Must create a copy of the object or Vue warns of an infinite loop rendering error.
        const chipsCopy = chips.map(c => ({
            ...c,
        }));
        function compare(a, b) {
            var chipA = a.letterCode + "-" + a.orgCode;
            var chipB = b.letterCode + "-" + b.orgCode;
            if (chipA < chipB){
                return -1;
            }
            if (chipA > chipB){
                return 1;
            }
            return 0;
        }
        return chipsCopy.sort(compare);
    },
},

Answer 1

sort 就地 修改数组。如果您不首先创建数组的副本，那么您将在渲染期间改变本地数据，这是不允许的(因此出现无限更新循环警告)。

在排序之前，您可以在方法的末尾像这样浅复制数组:

return chips.slice().sort(compare)

最好使用计算属性预先计算它，这样它就不必在每次 View 更新时都重新计算排序(计算属性仅在必要时更新)。