an infinite update loop in a component render function.

问题:

在基于el-table开发业务组件时遇到一个问题, 浏览器控制台报错[Vue warn]: You may have an infinite update loop in a component render function.

报错原因:

在 \`v-for\` 循环当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环。此时 Vue 就会发出警告（并不是真的已经无限循环了）。

触发场景:

为了支持表格列动态显示的功能，需要给每个el-table-column生成一个唯一ID，由**genUniqueKey**()方法生成.

模板代码
`
<template v-for="(columnGroupItem, groupIndex) in columnGroup">
<template v-if="columnGroupItem.slot">
  <el-table-column
    v-for="(columnProperty, index) in columnGroupItem.list"
    :key="`${groupIndex}_${index}_${genUniqueKey()}`"
    v-bind="columnProperty"
  >
    <template slot-scope="scope">
      <slot :name="columnProperty.slotName" v-bind="scope"></slot>
    </template>
  </el-table-column>
</template>
`

JS代码
`
export default {
    data() {
        return {count: 1}
    },
    methods: {
        genUniqueKey() {
            return this.count++
        }
    }
}
`

因为模板中v-for调用genUniqueKey()时会去修改data中的count导致的。

解决方案：
把count放到组件对象代码外面，作为局部变量
`
let count = 1
export default {

    data() {
        return {}
    },
    methods: {
        genUniqueKey() {
            return count++
        }
    }
}

`