[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 + <label> 实现的一组按钮。它有以下功能:

  1. 为了能够分组,需要设置它们的 name 属性
  2. 为了能够用 <label> 控制 <input>,需要给 <input> 设置 id
  3. 按钮可以被删除

于是我选择这样做:

<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>

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

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

方案一

<script>
let count = 0;
let itemCount = 0; // 把元素计数器放在这里 export default {
methods: {
getID(increase = true) {
if (increase) {
itemCount++;
}
return `my-component-${this.selfIndex}-${itemCount}`;
}
}
};
</script>

方案二

// 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折销售中,欢迎大家,链接在此


[Vue warn]: You may have an infinite update loop in a component render function的更多相关文章

  1. // mounted: {}, 原来是 空方法 导致了 vue 的警告 !| [Vue warn]: Error in mounted hook: "TypeError: handlers[i].call is not a function"

    // mounted: {}, 原来是 空方法 导致了 vue 的警告 !| vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in mounted hook ...

  2. [Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    因为header在HTML5里面是个原生的标签,所以在开发的时候会提示错误,解决方法:修改components里面左边的header

  3. vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.

  4. [Vue warn]: Do not use built-in or reserved HTML elements as component id: content

    错误如下: 报错原因: 不能使用内建标签,组件不能和html标签重复. 解决办法: 把name改成mContent解决.

  5. VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i

    <script> export default {     name:'header'       //  不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...

  6. [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

    1.[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. 第一眼看到这个错误一脸懵逼,项目使用很久了,代码 ...

  7. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

  8. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  9. [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc

    今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...

随机推荐

  1. Eclipse搭建Maven项目并上传SVN备份

    本文出自:http://www.cnblogs.com/2186009311CFF/p/7226127.html 背景:近段时间在学着Java,想着用Java做BS的项目.但是项目一遇到问题又要重做, ...

  2. 软件安装——彻底卸载MySQL

    如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...

  3. HDU 6438 Buy and Resell

    高卖低买,可以交易多次 维护一个优先队列,贪心 相当于每天卖出 用当前元素减优先队列最小得到收益 用0/卖出,1/买入标志是否真实进行了交易,记录次数 #include<bits/stdc++. ...

  4. oracle 如何更改密码的hash

    如何迁移oracle user的密码到新的环境,一下列出了方法: select name,spare4||';'||password pwd from sys.user$ where name = ' ...

  5. C\C++语言中的宏多重展开和递归展开

    宏定义中的#,## 1. 宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组     2.记号粘贴操作符(token paste operator): ##            “## ...

  6. c# html 转Word--Spire.Doc

    利用 Spire.Doc 组件,NuGet搜索“FreeSpire.Doc”有个免费版. using System;using System.Collections.Generic;using Sys ...

  7. python twisted异步将数据导入到数据库中

    from twisted.enterprise import adbapi from twisted.internet import reactor def creat_conn(): # 数据库基本 ...

  8. SpringBoot 集成mongodb(2)多数据源配置

    github:https://github.com/xiaozhuanfeng/mongoProj 现MongoDB有两个数据库: pom.xml: <!-- mongodb 配置 --> ...

  9. JDK+Tomcat+Eclipse环境搭建过程记录

    这学期选了一门公选课叫网络开发工具与技术,主要学习用JSP语言构建网站.在配置环境的过程中遇到不少的坑,于是记录下来,希望能帮到大家. 系统环境:Win10 JDK版本:8u121, JAVA版本1. ...

  10. 删除历史日志的一个API

    删除历史日志的一个API bool DeleteOldFiles(const char* strFolder, const char* strPrefix, bool is_recursion, UI ...