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

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()
    }
}
相关推荐
小马哥编程1 小时前
Function.prototype和Object.prototype 的区别
javascript
苹果醋31 小时前
React系列(八)——React进阶知识点拓展
运维·vue.js·spring boot·nginx·课程设计
王小王和他的小伙伴1 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08212 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光932 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
胡西风_foxww3 小时前
【ES6复习笔记】Class类(15)
javascript·笔记·es6·继承··class·静态成员
布兰妮甜3 小时前
使用 WebRTC 进行实时通信
javascript·webrtc·实时通信