vue2在v-for时出现循环渲染问题You may have an infinite update loop in a component render function.

已于 2024-07-26 10:24:59 修改
阅读量380 收藏 1
点赞数 15
分类专栏： Vue BUG 前端 文章标签： 前端 javascript 开发语言 vue.js
于 2024-07-26 09:36:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zwwxd666/article/details/140706937
版权
前端 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
Vue
19 篇文章 0 订阅
订阅专栏
BUG
10 篇文章 0 订阅
订阅专栏

报错信息

image-20240726083838697

大概原因

使用了v-for循环，且v-for循环渲染出来的组件修改了数据，从而又驱动了响应式渲染，然后继续渲染v-for循环，然后v-for循环出来的数据里又修改了数据，从而达到死循环

究其原因是在v-for渲染结束前修改了变量，导致重新渲染，然后又修改变量…

image-20240726084502007 image-20240726092729211

打个断点看看

image-20240726092750543

那就是说，v-for里的变量在渲染结束前不能被修改，否则渲染到一半变量突然一变，新旧DOM一比对，又得重新渲染，然后死循环

解决方法

显示时分秒标识符不用变量存，直接怼到标签上

image-20240726095542129

Zww0891
关注
  • 15
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue循环问题-[Vue warn]: You may have an infinite update loop in a component render function-解决-在线案例
JackieDYH的博客
04-28 4758
[Vue warn]: You may have an infinite update loop in a component render function.在组件呈现函数中可能有一个无限更新循环 在循环过程中，修改到了循环对象，从而引发了无限循环，此时vue会发出警告，但并没有真正产生死循环。 你的确导致了一个无限循环， 因为array.sort()改变了数组自身，导致了过滤器又一次被触发。确保在副本上对数组排序： return value.slice().sort(...) 分析 ...
vue项目 接口中对获取到的数据进行双重for循环导致页面不渲染
xiaoyugan000的博客
05-12 1939
今天跟朋友解决一个vue项目中的问题，大概意思是： 前端向后端发送接口请求，请求成功之后，后端返回了一个数组，数组中包含了上百条数据。而我们需要做得是将这上百条数据以每组20条的形式渲染到页面上。 我和朋友的解决办法是： 定义一个空数组，这个空数组里面的元素也是空数组，然后循环返回的包含了上百条数据的数组，将前20条数据放进第一个为空数组的元素中，然后利用splice将原数组的前20条数据删除，跳出循环。以下为代码： getSell(){ topicList({需要传的数据}).then(
You may have an infinite update loop in a component render function.
最新发布
weixin_53763249的博客
12-13 974
问题：You may have an infinite update loop in a component render function.在组件渲染函数中你可能有一个无限更新的循环这就导致页面一直在加载无限循环下去，没有终止，卡死在vue的data方法中：data() {// 定义响应式变量isExecuteFlag: false}<el-table-column prop="" lab。问题就来了：循环没有及时终止，导致变量一直在更新，而Dom又一直在渲染，无限循环，渲染-更新 卡死。
Vue中v-for遍历多层嵌套数据，不能重新渲染的问题
weixin_44087528的博客
05-07 3564
最近在出了一个动态参数的问题，需要把后台得json处理成一组嵌套的表单数据，并显示动态表单，进过一番（好久好久）头皮发麻的处理，终于处理成可用也是所需要的数据。 但是在生成动态表单时，当然是通过v-for指令来生成的，这是问题的前提。但是当我点击按钮给数组新增一个表单项时，界面并未更新，懵比，也没遇到过啊，以前都有用的，咋现在熄火了呢。头疼，各种折磨，弄了将近一天。 ...
vue项目中出现 You may have an infinite update loop in a component render function
yyycsdnyyy的博客
04-20 916
文章目录一、第一次调试二、第二次调试本人结论 这个bug的意思是组件渲染函数中可能有无限更新循环。 一、第一次调试 在vue所渲染的界面元素当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环，此时 Vue 就会发出警告。 如 ：本人第一次的情况是在v-for中循环使用了tbody函数显示界面元素。 tibody: function (item) { var x = '789'; console.lo
vue报错：You may have an infinite update loop in a component
岁月如歌去，十年弹指间
10-18 5549
vue项目中，在v-for循环当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环。此时 Vue 就会发出警告（并不是真的已经无限循环了）。 案例 方案一：定义全局变量 放在局部变量里，使它不直接关联在组件上 ...
vue You may have an infinite update loop in a component render function报错
Cooky的博客
02-19 1243
如标题所示，是在使用ant design vue的表格组件时引起的错误，报错信息如下 首先，这个表格是在一个v-for的a-tab组件内的a-table 看错误信息表示无限更新的循环 后来发现，渲染表格内容时，调用了一个计算方法返回要显示的内容，错误在于，在计算方法内，又改变了data数据的值，在更新渲染的时候又修改数据，又回导致更新，于是就死循环了 简略错误代码如下 <a-tabs v-...
若依分离版、vue报错：[Vue warn]: You may have an infinite update loop in a component render function.
weixin_46953697的博客
03-22 2319
问题描述： 页面运行正常，但刷新页面或新增文档后页面一直加载，后台报错： [Vue warn]: You may have an infinite update loop in a component render function. 根据网上查询的结果原因基本如下： 在for循环中我使用了函数，页面刷新或新增文档时间接修改了循环响应数据而且没有终止条。页面执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，所以界面一直在转圈。 原代码： 数据： data() { return { //附件
el-table 中子组件按钮渲染报错--You may have an infinite update loop in a component render function
ss_Tina的博客
06-21 438
在el-table中有个按钮子组件，当el-table中只有一条数据的时候不会有错，但是当数据大于1条时页面就报错了。其实看起来是没问题。因为this.wordData在页面初始化调接口的时候也有赋值其他的数据，所以是将wordData定义在了 data里面。原来是打印了this.wordData才造成报错有无限循环，我如果用原来的代码去掉打印也是没问题的。后来我发现了上面的代码换成重新定义是没问题的不会报错，不用this.。后面我想还原错误，截报错图来发文的时候，随意去掉了注释，发现居然不报错啦！
vue2[初级]循环语句
u011664286的博客
09-21 806
vue for循环
vue中v-for内部方法 带来的死循环问题
lingdian1614114082的博客
07-24 2701
在做v-for循环调用方法时出现了无限调用的问题 结果：页面上渲染出了数据，但是无限调用了这个方法，可以看到一直在发送请求 我猜测原因可能是 双向绑定 多次调用接口导致这个绑定的变量的值不断被改变，改变后由于数据驱动，页面也跟着渲染，渲染时又调用了方法导致值改变....形成了一个无限调用 尝试：写一个组件，在分类子组件中传当前分类ID去调用这个文章列表组件，文章列表拿到分类ID请求接口拿到数据并遍历渲染 总结： 纠结了这么久的v-for无限循环问题，也算是知道了在...
js中三种for循环（含案例分析）
热门推荐
Cuichenyang158的博客
11-05 1万+
vue三种for循环，区别，作用
vue中的变异方法造成的死循环
曼夭的博客
07-11 2447
1.简单的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
Vue.js学习笔记：v-for循环
汉堡请不要欺负面条
07-28 7457
v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，此外，v-for还可以遍历对象的属性，并且可以和template模板元素一起使用。 （1）.遍历 pejeco {{ tab.text }} var vm =new Vue({ el: '#didi-
Vue双重循环渲染数据
hql1024的博客
10-21 1991
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>版本更新历史记录</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4....
Vue 循环渲染
ivenqin的博客
12-04 1348
v-for指令的使用 在 Vue 中，可以使用 v-for 指令绑定数据到数组来渲染一个列表。 使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组，item是要在其上进行迭代的数组元素的别名： 示例： 例如假设有一组关于水果的数据，需要使用列表渲染页面，我们可以在 <li> 标签上绑定 v-for 指令： <!DOCTYPE html> <html> <head> <meta charset="
vue中for循环用法总结
sdu_DYL的博客
04-08 2049
vue中for循环用法总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值