You may have an infinite update loop in a component

今天在讨论群里看到一个错误，去模拟了一下
错误日志如下：
You may have an infinite update loop in a component
译文：您可能在一个组件中有一个无限更新循环

修改之前的代码

<template>
	<div>
		<div v-for="(item, index) in items" :key="index">
			<input type="checkbox" :name="'my-component-' + index" :id="getID(true)" >
			<label :for="getID(false)">{{index}}</label>
			<button type="button" @click="remove(index)">按钮</button>
		</div>
	</div>
</template>

<script>
	let count = 0;
	// let temp = 0;

	export default {
		data() {
			return {
				selfIndex: 0,
				itemIndex: 0,
				items: [{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					}
				]
			}
		},
		methods: {
			getID(increase) { // 注意，问题就出在这里
				if (increase) {
					this.itemIndex++;
					// temp++;
				}
				return `my-component-${this.selfIndex}-${this.itemIndex}`;
			},
		},
		beforeMount() {
			this.selfIndex = count;
			count++;
		}
	}
</script>

错误分析：
原因在于在一个v-for循环中调用了可以修改data中itemIndex属性的方法。
解决方向：

• 把data中属性值提升到组件导出部分之外

修改之后的代码

<template>
	<div>
		<div v-for="(item, index) in items" :key="index">
			<input type="checkbox" :name="'my-component-' + index" :id="getID(true)" >
			<label :for="getID(false)">{{index}}</label>
			<button type="button" @click="remove(index)">按钮</button>
		</div>
	</div>
</template>

<script>
	let count = 0;
	let temp = 0;

	export default {
		data() {
			return {
				selfIndex: 0,
				itemIndex: 0,
				items: [{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					},
					{
						name: 'cxy',
						age: 26
					}
				]
			}
		},
		methods: {
			getID(increase) { // 注意，问题就出在这里
				if (increase) {
					// this.itemIndex++;
					temp++;
				}
				return `my-component-${this.selfIndex}-${temp}`;
			},
		},
		beforeMount() {
			this.selfIndex = count;
			count++;
		}
	}
</script>