[Vue warn]: You may have an infinite update loop in watcher with express

ECharts无限循环更新Bug
原创 已于 2023-12-04 16:54:56 修改 · 8.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #echarts

于 2021-06-28 15:29:08 首次发布
本文分析了ECharts中因对option.data数组直接操作导致的无限更新循环问题。阐述了在watch监听下，对数组进行操作如倒置时引发的数据变动无限循环现象。

echarts中option的data传数组，千万不要对数组进行操作，否则会出bug
you may have an infinite update loop in watcher with expression

错误分析：
首先chartSource在created生命周期中获取数据时也发生了变化,watch监听到后,重新渲染图标执行option操作,结果option中的data中的数组进行倒置了,

 data: data.xAxis.reverse()

那么watch监听的chartSource又发生变化,陷入了无限死循环中。

父组件中的传参：

子组件：

v-for产生 You may have an infinite update loop in a component render function
诗水人间
11-27 1002
原因是在 MyList是经过vue处理过后的对象，里面有一些get,set 监听字段变化，用于更新视图的数据。MyList 是一个数组，我希望将排序后的结果返回进行for循环，因此设计了一个myMethod函数。从debug视图可以很明显的知道这个是一个被vue处理过的对象，用的是观察者模式。函数如下，根据id返回。
Vue 品牌列表自定义局部指令
mqingo的博客
01-07 614
  09品牌列表自定义局部指令.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
解决iview多表头动态更改列元素发生的错误的方法
01-21
解决iview ‘You may have an infinite update loop in watcher with expression “columns”‘ 解决方案 单表头是可以动态变化不需要增添什么东西 多表头目前iview尚不能动态变化，会报错You may have an infinite update loop in watcher with expression columns解决方法是github大神提供的：需要修改iview.js源码 将iview.js中 columns: { handler: function handler() { var
Vue infinite update loop的问题解决
12-01
一个尤大大曾回复过的问题 vue warn : You may have an infinite update loop in a component render function 最近再写一个数组渲染时，源数据是拿到的数组经过排序后的数组，正常运行却出现爆红： 报红代码： computed: { ...mapState({ fromNames (state) { let fromNames = state.quote.fromNames; return fromNames.sort((a, b) => b.isBind - a.isBind);; }, }), },
You may have an infinite update loop in watcher with expression “data“ 记一次报错
weixin_51352120的博客
03-21 2410
在一次父组件与子组件同时赋值的过程中，父组件初始化值，，子组件更新值后push进去，后页面报错You may have an infinite update loop in watcher with expression "data"，一直说有循环，单身并没有在watch那些冰没有循环，后来发现父组件跟子组件传的数组对象不一致，两个数组合并不了报的这个错，后来改成一样的就好了。
you may have an infinite update loop in watcher with expression
weixin_34307464的博客
03-07 7968
echarts中option的data传数组,千万不要对数组进行操作. 否则会出bug you may have an infinite update loop in watcher with expression 在带有表达式的观察程序中，可能有无限更新循环 为什么会出现这个bug呢? 分析如下: 错误的模式下:首先yKeyData在created生命周期中获取数据时也发生了变化,watch监听...
vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "dynamicTableHeaderInit"
最新发布
08-26
在 Vue 中，当出现警告信息 `infinite update loop in watcher "dynamicTableHeaderInit"` 时，这意味着 Vue 的响应式系统检测到一个无限更新循环。这种警告通常发生在某个 `watcher` 或计算属性在更新过程中不断...
You may have an infinite update loop in watcher with expression "addListDevice"
08-08
[Vue warn]: You may have an infinite update loop in watcher with expression 'addListDevice' ``` 这表示 Vue 检测到在某个 watcher 中存在可能导致无限更新循环的表达式。该问题通常出现在组件的 `data`、`...
Vue 源码解析（二）：依赖更新（Watcher对象，nextTick和更新队列）
Czuaphe的博客
05-25 961
第一篇，新建watcher对象时运行的getter函数，会调用data属性的get修饰器从而触发dep.depend()函数，完成了watcher与dep依赖的收集。让watcher和data建立了联系。那么这一次，让我们看一下依赖收集完成之后，是如何完成依赖更新的。 让我们从还是在initData() 方法里面的defineReactive()方法再次开始吧！ export function defineReactive (obj: Object, key: string, val: any, custo
【探究Vue原理】watcher的异步更新
杨光的博客
09-02 2381
目录开篇同步更新异步更新异步更新的源码分析flushSchedulerQueuequeueWatcher     开篇   之前的文章提到过，当用户修改了组件状态之后，dep会通知它所关联的watcher进行更新。更新过程分两种，一种是同步更新，另一种是异步更新。     同步更新   如果一个watcher实例的sync属性被置为true，则表明此watc...
(vue)Vue前台警告You may have an infinite update loop in watcher with expression
nyf_unknow的博客
08-16 4278
原因：循环的数组设置了全局（和我的特殊数组有关）
You may have an infinite update loop in watcher with expression “columns“
Node.js安装报错 - npm -v 查看版本无效
08-15 1589
场景：iview 动态加载二级表头问题：中文含义：您可能在具有表达式“columns”的观察程序中有一个无限更新循环解决方法：方法1： 修改iview.js源码，亲测有效。（不建议）参考链接：https://blog.csdn.net/Qi_Si_Miao_Xiang/article/details/108826950方法2： 修改table组件代码。参考链接：https://blog.csdn.net/fanhailing/article/details/108465412。
Vue前台警告You may have an infinite update loop in watcher with expression
符忻潼
06-11 1万+
今天在使用 Vue 开发过程中，前台控制台报了一个警告，经过一番百度，最终解决了问题，过程如下。 //控制台报错信息 vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "value" 控制台信息 控制台警告错误如图： 原因 报错是因为我要给 v-for 里边的一个数组类型的 item 排序，如果是普通的绑定，用计算属性是搞定的。然而，这个牵
【已解决】you may have an infinite update loop in watcher with expression “xxx“
程序边界
04-27 3768
不要在watch中对监听的值做修改操作，这个自不必多说，若是有deep: true去掉试试。。。水 简单记录，详细之后再补
解决iview 'You may have an infinite update loop in watcher with expression "columns"'
weixin_34319640的博客
11-02 3686
为什么80%的码农都做不了架构师？>>> ...
解决iview table组件报错问题You may have an infinite update loop in watcher with expression “columns“的两种方法
fanhailing的博客
09-08 8318
在使用table切换的时候出现报错： 代码是这样的： 表头是多级的。 查找了一下解决方案，多数是这一种： 方法一、更改iview.js源码： 改为： 但是这个仅限于本地使用，最好的是更改table组件，然后build生成iview.js和iview.min.js 更改table组件代码： src/components/table/table.vue中： 将： 画红框线位置代码改为： 然后重新build一下生成iview.js和iview.min.js。 方法二：不更改源码 在table外一层用v
报错解析 [Vue warn]: You may have an infinite update loop in a component render function.
热门推荐
pardon110的博客
11-07 7万+
vue操作一个很有意思的报错 [Vue warn]: You may have an infinite update loop in a component render function. 组件代码结构： <template> <span class=&a
You may have an infinite update loop in a component render function
猿妞儿
08-04 8616
}错误信息[Vue warn]: You may have an infinite update loop in a component render function. 过滤器例子
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值