列表渲染-infinite update loop in a component render function

错误：组件渲染函数中可能有无限的更新循环。
原因：渲染组件的时候，使用计算属性或者方法去改变了data里面的数据，data里面的数据变化又会调用render函数，从新渲染组件，这样就造成了死循环。

例子：

<template>
  <div id="app">
    <table>
      <thead>
      </thead>
      <tbody>
      <tr v-for="item in arr1" :key="item">
          <td >{{getIndex()}}</td>
      </tr>
      <tr v-for="item in arr2" :key="item">
          <td>{{getIndex()}}</td>
      </tr>

      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      arr1: [1, 2],
      arr2: [3, 4, 5],
      num: 0
    }
  },
  methods: {
    getIndex: function () {
      return ++this.num
    }
  }
}
</script>

既然列表渲染时调用getIndex更改num会重新触发渲染，那么我们可以将data里面num变量提到外面作为局部变量

<template>
  <div id="app">
    <table>
      <thead>
      </thead>
      <tbody>
      <tr v-for="item in arr1" :key="item">
          <td >{{getIndex()}}</td>
      </tr>
      <tr v-for="item in arr2" :key="item">
          <td>{{getIndex()}}</td>
      </tr>

      </tbody>
    </table>
  </div>
</template>

<script>
var num = 0
export default {
  name: 'App',
  data () {
    return {
      arr1: [1, 2],
      arr2: [3, 4, 5]
    }
  },
  methods: {
    getIndex: function () {
      return ++num
    }
  }
}
</script>

参考：
https://blog.csdn.net/a5534789/article/details/82780298

https://segmentfault.com/a/1190000011156865?utm_source=tag-newest