[Vue warn]: You may have an infinite update loop in a component render function

[Vue warn]: You may have an infinite update loop in a component render function

This is a very strange, never before encountered. If I have led projects, Daoye Hao to do, is slowly debug; but why encountered this problem in the company's project, and architecture company project is very complicated, I did not fully grasp. More annoying is that, because of the complex system, debug is very difficult, plus there is no testing framework, this downright ah ......

Good Sibu Si, 3, 4 o'clock in the afternoon when, just moments to the hungry, the results fall into a low blood sugar condition, really leaky house with rain every small boat and hit headwinds, raw so hungry my brain Jen ......

But finally I was Google + debug it. This fact, in  v-for the cycle which, if a method or property is calculated on vm. $ Data attributes operation, theoretically, possible to modify the cycle as an object, to induce an infinite loop. At this time, Vue will issue a warning (not really have a infinite loop).

Thus, for example, a component in it is  :checked + <label> a group of buttons implemented. It has the following features:

1. To be able packets need to set their  name properties
2. To be able to use  <label> the control  <input>, the need to  <input> set id
3. Button can be deleted

So I choose to do so:

<template>
<div>
  <template v-for="(item, index) in items">
    <input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
    <label :for="getID(false)">
    <button type="button" @click="remove(index)">&times;</button>
  </template>
</div>
</template>

<script>
let count = 0;

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

Here, in order to generate a unique ID, I have chosen are all each cycle  vm.itemIndex++, which will appear in front of that problem, there are hidden dangers.

Solution to the problem, there are two, one is to  itemIndex be placed on a local variable, so that it is not directly related to the assembly; the other is a write global unique ID generation function, then a reference room. The principle is the same. The repeated portion is not written, modified substantially as follows:

Option One

<script>
let count = 0;
let itemCount = 0; // 把元素计数器放在这里

export default {
  methods: {
    getID(increase = true) {
      if (increase) {
        itemCount++;
      }
      return `my-component-${this.selfIndex}-${itemCount}`;
    }
  }
};
</script>

Option II

// helper.js 生成唯一 id
let count = 0;
export default function uniqueID(increase = true) {
  if (increase) {
    count++;
  }
  return `prefix-${count}`;
}

// 原来的组件
import uniqueID from './helper';

export default {
  methods: {
    getID(increase = true) {
      let id = uniqueID(increase);
      return `my-component-${this.selfIndex}-${id}`;
    }
  }
}

---

Face questions [ad] meat teacher explain

Way to be advertising my new auditorium has been on the line, will be broadcast next Tuesday.

This time I decided to introduce myself accumulation face questions in detail to all the lectures to the students. From the set purpose of solving the problem, the direction of the investigation, hoping to hear the answer, how many know the result of the evaluation, etc. about what have come to a complete disclosure. I believe we hear, can be more clear direction daily learning.

It is still 75% off sale, we welcome, link here .

---