【vue】v-for 使用 Array.prototype.reverse() 的无限更新循环

左钦杨2024-02-03 14:50

javascript 复制代码

v-for="item in items.reverse()"

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

Array.prototype.reverse 实际上修改了它应用于的数组.

Vue 获取此更改并同时触发 v-for重新评估，触发另一个 .reverse() .这会触发 Vue 重新渲染，导致 .reverse()

要解决此问题，请使用 computed items[] 的浅拷贝上的属性(例如，使用 Array 解构 [...this.items] 作为反向列表:

javascript 复制代码

computed: {
    itemsReverse() {
      return [...items].reverse()
    }
}