[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
这个问题很奇怪,之前从来没有遇到过。如果是我自己主导的项目,倒也好办,慢慢 debug 就是;偏偏在公司的项目里遇到这个问题,而公司项目的体系结构很复杂,我还没完全掌握。更恼火的是,因为体系复杂,debug 也非常困难,再加上尚无测试框架,这个难搞啊……
好死不死的,当时是下午3、4点钟,正好到了肚饿的时刻,结果又落入低血糖状态,真是屋漏偏逢连阴雨,船小又碰顶头风,饿得我脑仁生疼……
不过终于还是被我 Google + debug 出来。事实上是这样的,在 v-for
循环当中,如果用方法或者计算属性对 vm.$data 的属性进行操作,理论上,可能因为修改到循环对象,诱发无限循环。此时 Vue 就会发出警告(并不是真的已经无限循环了)。
例如这样一个组件,它里面是用 :checked + <label>
实现的一组按钮。它有以下功能:
- 为了能够分组,需要设置它们的
name
属性 - 为了能够用
<label>
控制<input>
,需要给<input>
设置id
- 按钮可以被删除
于是我选择这样做:
<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)">×</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的更多相关文章
- // 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 ...
- [Vue warn]: Do not use built-in or reserved HTML elements as component id: header
因为header在HTML5里面是个原生的标签,所以在开发的时候会提示错误,解决方法:修改components里面左边的header
- vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.
- [Vue warn]: Do not use built-in or reserved HTML elements as component id: content
错误如下: 报错原因: 不能使用内建标签,组件不能和html标签重复. 解决办法: 把name改成mContent解决.
- 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元素 ...
- [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. 第一眼看到这个错误一脸懵逼,项目使用很久了,代码 ...
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
- 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 ...
- [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 ...
随机推荐
- Eclipse搭建Maven项目并上传SVN备份
本文出自:http://www.cnblogs.com/2186009311CFF/p/7226127.html 背景:近段时间在学着Java,想着用Java做BS的项目.但是项目一遇到问题又要重做, ...
- 软件安装——彻底卸载MySQL
如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...
- HDU 6438 Buy and Resell
高卖低买,可以交易多次 维护一个优先队列,贪心 相当于每天卖出 用当前元素减优先队列最小得到收益 用0/卖出,1/买入标志是否真实进行了交易,记录次数 #include<bits/stdc++. ...
- oracle 如何更改密码的hash
如何迁移oracle user的密码到新的环境,一下列出了方法: select name,spare4||';'||password pwd from sys.user$ where name = ' ...
- C\C++语言中的宏多重展开和递归展开
宏定义中的#,## 1. 宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组 2.记号粘贴操作符(token paste operator): ## “## ...
- c# html 转Word--Spire.Doc
利用 Spire.Doc 组件,NuGet搜索“FreeSpire.Doc”有个免费版. using System;using System.Collections.Generic;using Sys ...
- python twisted异步将数据导入到数据库中
from twisted.enterprise import adbapi from twisted.internet import reactor def creat_conn(): # 数据库基本 ...
- SpringBoot 集成mongodb(2)多数据源配置
github:https://github.com/xiaozhuanfeng/mongoProj 现MongoDB有两个数据库: pom.xml: <!-- mongodb 配置 --> ...
- JDK+Tomcat+Eclipse环境搭建过程记录
这学期选了一门公选课叫网络开发工具与技术,主要学习用JSP语言构建网站.在配置环境的过程中遇到不少的坑,于是记录下来,希望能帮到大家. 系统环境:Win10 JDK版本:8u121, JAVA版本1. ...
- 删除历史日志的一个API
删除历史日志的一个API bool DeleteOldFiles(const char* strFolder, const char* strPrefix, bool is_recursion, UI ...