Vue.js中v-for使用Array.prototype.reverse()引发无限更新循环求助

嘿，这个坑我之前也踩过！咱们先搞明白为啥会出现这个警告，再一步步解决它。

问题到底出在哪？ #

你模板里写的items.reverse()是关键——这个方法会直接修改原数组！每次组件渲染的时候，这个表达式都会执行一次，把items数组反转一遍。数组一变化，Vue就会触发组件重新渲染，重新渲染时又会执行reverse()修改数组，这不就陷入无限循环了嘛，Vue当然要给你抛警告啦。

几种靠谱的解决方案 #

1. 直接在模板里生成新数组再反转 #

最简单的临时解决办法，就是先复制原数组生成一个新数组，再反转新数组，这样就不会改动原items了：

<div v-for="item in [...items].reverse()" :key="item.id">{{item.title}}</div>

⚠️ 别忘了给v-for加上:key哦，这是Vue的最佳实践，能让DOM更新更高效。

2. 用计算属性处理（强烈推荐） #

如果你的反转数组要在多个地方用到，或者想让代码更清晰，用计算属性是最好的选择。计算属性只会在依赖的items变化时重新计算，不会每次渲染都执行：

export default {
  name: "component-name",
  data(){
    return {
      items: []
    }
  },
  computed: {
    reversedItems() {
      // 用扩展运算符复制原数组，再反转新数组
      return [...this.items].reverse()
    }
  }
}

然后模板里直接用这个计算属性：

<div v-for="item in reversedItems" :key="item.id">{{item.title}}</div>

3. 用slice()创建数组副本 #

slice()方法不传参数时会返回原数组的一个浅拷贝，所以也可以这么写：

<div v-for="item in items.slice().reverse()" :key="item.id">{{item.title}}</div>

最后再提一嘴 #

不管用哪种方法，都一定要给v-for绑定唯一的:key值（比如每个item的id），这不仅能避免一些奇怪的DOM更新问题，也是Vue官方明确要求的最佳实践哦。

内容的提问来源于stack exchange，提问作者EchoAro