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

Question

我有这样的错误,我无法以任何方式解决

[Vue警告]:您可能在组件渲染功能中有一个无限的更新循环.在发现

在组件使用中

    <div  v-for="item in items">
         {{item.title}}
    <div>
.................
    <div  v-for="item in items.reverse()">
         {{item.title}}
    <div>

export default {
   name: "component-name"
   data(){
        return { 
            items: []
            }
       }
 }

....

Answer 1

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

Vue接受此更改并触发v-for重新评估,触发另一个.reverse().这会触发Vue重新渲染,导致它.reverse() 等等等等等等等等等 ......

要解决这个问题,请computed在浅层副本上使用属性items[](例如,使用Array解构[...this.items]列表来反转列表:

new Vue({
  el: '#app',
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    itemsReverse() {
      return [...this.items].reverse()
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <ul v-for="item in items">
    <li>{{item}}</li>
  </ul>
  <hr />
  <ul v-for="item in itemsReverse">
    <li>{{item}}</li>
  </ul>
</div>