You may have an infinite update loop in a componen

褰辩话发布于2019-08-22 11:06 / 2837人阅读

摘要：今天写着写着，突然发现控制台里有错误这个问题很奇怪，之前从来没有遇到过。此时就会发出警告并不是真的已经无限循环了。相信大家听后，可以更加明确日常学习的方向。目前还在折销售中，欢迎大家，链接在此。

今天写着写着，突然发现控制台里有错误：

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

这个问题很奇怪，之前从来没有遇到过。如果是我自己主导的项目，倒也好办，慢慢 debug 就是；偏偏在公司的项目里遇到这个问题，而公司项目的体系结构很复杂，我还没完全掌握。更恼火的是，因为体系复杂，debug 也非常困难，再加上尚无测试框架，这个难搞啊……

好死不死的，当时是下午3、4点钟，正好到了肚饿的时刻，结果又落入低血糖状态，真是屋漏偏逢连阴雨，船小又碰顶头风，饿得我脑仁生疼……

不过终于还是被我 Google + debug 出来。事实上是这样的，在 v-for 循环当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环。此时 Vue 就会发出警告（并不是真的已经无限循环了）。

例如这样一个组件，它里面是用 :checked + 实现的一组按钮。它有以下功能：

为了能够分组，需要设置它们的 name 属性

为了能够用控制，需要给设置 id

按钮可以被删除

于是我选择这样做：

这里，为了能生成唯一 ID，我选择每次循环都对 vm.itemIndex++，这就会出现前面说的问题，存在隐患。

解决的方案有两种，一种是把 itemIndex 也放在局部变量里，使它不直接关联在组件上；另一种则是写一个全局的唯一 ID 生成函数，然后引用进来。原理都是一样的。重复的部分就不写了，修改后大体如下：

方案一

方案二

// 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}`;
    }
  }
}

【广告】肉老师的面试题详解

顺便做个广告，我的新讲堂已经上线，将于下周二直播。

这次我决定把自己积累的面试题详细地介绍给所有来听课的同学。从设置这道题的目的，考察的方向，希望听到的答案，答出多少大约是什么评价等等都来个彻底的公开。相信大家听后，可以更加明确日常学习的方向。

目前还在75折销售中，欢迎大家，链接在此。

这两天听评书《乱世枭雄》，学到一句话“拉屎脸朝外”，形容讲义气，不知道咋联系的……

同步于我的博客。

云服务器私有云 infinite May have Loops

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91781.html

Image Load Error Handler

Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...

cocopeak 2019-08-02 12:03 评论0 收藏0
Image Load Error Handler

Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...

longmon 2019-08-29 17:18 评论0 收藏0
Image Load Error Handler

Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...

roland_reed 2019-08-26 13:23 评论0 收藏0
[LeetCode] 398. Random Pick Index (Reservoir Sampl

Problem Given an array of integers with possible duplicates, randomly output the index of a given target number. You can assume that the given target number must exist in the array. Note:The array siz...

edagarli 2019-08-16 13:46 评论0 收藏0
使用REACT VR构建web虚拟现实

Building virtual reality experiences on the web with React VR Over the past year, virtual reality has made major strides toward becoming the next computing platform. With Oculus Rift, consumer-grade h...

anquan 2019-08-20 15:55 评论0 收藏0