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

已于 2023-12-04 16:54:56 修改
阅读量7.7k 收藏 3
点赞数 1
分类专栏： echarts vue项目开发 文章标签： vue.js echarts
于 2021-06-28 15:29:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42103673/article/details/118304646
版权

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又发生变化,陷入了无限死循环中。

父组件中的传参：

子组件：

qq_Girl200
关注
专栏目录
vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err
郭宝的博客
03-12 6821
背景： 在运行一个Vue项目时，出现了如下报错信息 vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '/carsend'. This may cause an update error. 解决办法： 错误提示说，检测到重复的密钥：“/carsend”。这可能会导致更新错误。 初步判断是路由路径重名了，那么根据这条线索，全局搜索/carsend 路由路径，查找相似路径，如下图所示，确实有两个相同的路由路径 那...
Vue 品牌列表自定义局部指令
mqingo的博客
01-07 488
  09品牌列表自定义局部指令.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
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);; }, }), },
[Vue warn]: You may have an infinite update loop in a component render function
qq_45796592的博客
05-12 8493
解决bug的方法
you may have an infinite update loop in watcher with expression
weixin_34307464的博客
03-07 7350
echarts中option的data传数组,千万不要对数组进行操作. 否则会出bug you may have an infinite update loop in watcher with expression 在带有表达式的观察程序中，可能有无限更新循环 为什么会出现这个bug呢? 分析如下: 错误的模式下:首先yKeyData在created生命周期中获取数据时也发生了变化,watch监听...
You may have an infinite update loop in watcher with expression “data“ 记一次报错
weixin_51352120的博客
03-21 700
在一次父组件与子组件同时赋值的过程中，父组件初始化值，，子组件更新值后push进去，后页面报错You may have an infinite update loop in watcher with expression "data"，一直说有循环，单身并没有在watch那些冰没有循环，后来发现父组件跟子组件传的数组对象不一致，两个数组合并不了报的这个错，后来改成一样的就好了。
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 排序，如果是普通的绑定，用计算属性是搞定的。然而，这个牵
(vue)Vue前台警告You may have an infinite update loop in watcher with expression
nyf_unknow的博客
08-16 3417
原因：循环的数组设置了全局（和我的特殊数组有关）
【已解决】you may have an infinite update loop in watcher with expression “xxx“
程序边界
04-27 3228
不要在watch中对监听的值做修改操作，这个自不必多说，若是有deep: true去掉试试。。。水 简单记录，详细之后再补
若依分离版、vue报错：[Vue warn]: You may have an infinite update loop in a component render function.
weixin_46953697的博客
03-22 2333
问题描述： 页面运行正常，但刷新页面或新增文档后页面一直加载，后台报错： [Vue warn]: You may have an infinite update loop in a component render function. 根据网上查询的结果原因基本如下： 在for循环中我使用了函数，页面刷新或新增文档时间接修改了循环响应数据而且没有终止条。页面执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，所以界面一直在转圈。 原代码： 数据： data() { return { //附件
【探究Vue原理】watcher的异步更新
杨光的博客
09-02 2238
目录开篇同步更新异步更新异步更新的源码分析flushSchedulerQueuequeueWatcher     开篇   之前的文章提到过，当用户修改了组件状态之后，dep会通知它所关联的watcher进行更新。更新过程分两种，一种是同步更新，另一种是异步更新。     同步更新   如果一个watcher实例的sync属性被置为true，则表明此watc...
Vue 源码解析（二）：依赖更新（Watcher对象，nextTick和更新队列）
Czuaphe的博客
05-25 857
第一篇，新建watcher对象时运行的getter函数，会调用data属性的get修饰器从而触发dep.depend()函数，完成了watcher与dep依赖的收集。让watcher和data建立了联系。那么这一次，让我们看一下依赖收集完成之后，是如何完成依赖更新的。 让我们从还是在initData() 方法里面的defineReactive()方法再次开始吧！ export function defineReactive (obj: Object, key: string, val: any, custo
解决iview 'You may have an infinite update loop in watcher with expression "columns"'
weixin_34319640的博客
11-02 3582
为什么80%的码农都做不了架构师？>>> ...
You may have an infinite update loop in watcher with expression “columns“
Node.js安装报错 - npm -v 查看版本无效
08-15 862
场景：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。
解决iview table组件报错问题You may have an infinite update loop in watcher with expression “columns“的两种方法
fanhailing的博客
09-08 8033
在使用table切换的时候出现报错： 代码是这样的： 表头是多级的。 查找了一下解决方案，多数是这一种： 方法一、更改iview.js源码： 改为： 但是这个仅限于本地使用，最好的是更改table组件，然后build生成iview.js和iview.min.js 更改table组件代码： src/components/table/table.vue中： 将： 画红框线位置代码改为： 然后重新build一下生成iview.js和iview.min.js。 方法二：不更改源码 在table外一层用v
【bug】watch监听中循环数组，触发无限循环You may have an infinite update loop in watcher with expression
花椒和蕊的博客
08-25 2401
问题产生的原因是，后端返的数值字段为null，我用的是el-input-number，为null的时候默认值为0，也就是一点击就会出现个0，不想要这种效果，解决办法就是把null改为underiend。watch监听数组，循环数组，正常写业务逻辑，然后就遇到一个bug，在这个循环里代码重复了上百次，还会有报错，类似于这样。因为是在watch中直接修改的，代码的执行顺序没有控制好，才引起的报错。业务逻辑稍稍有些复杂，同一份数据源里要处理很多业务逻辑。总结最近遇到的bug，这个花的时间还挺长的。...
vue+elementui子组件实时监听父组件数据变化在处理成无限循环问题
weixin_42484910的博客
07-12 1152
前提：子组件实时监听父组件保存方法后返回的数据 （数组），并拿到其数据渲染子页面上（多组表单形式） 报错信息：You may have an infinite update loop in watcher with expression “financials1” 原因 ：子组件中监听父组件传入的数据financials1 直接在this.getFiancialInfo()里处理 在其处理的过程中会使financials1里的值改变 从而又触发了监听 进入死循环 解决方法 1.在data定义一个存放父组件
vue中渲染数据可能有一个无限更新循环
热门推荐
wang01ping的博客
06-12 2万+
是使用Iview 组件库中的table组件``` <Table  highlight-row ref="selection" :columns="columnsList" :border="border" :height="height" :data='data' :stripe='stripe' @on-row-dblclick='dblclick' @on-current-change=...
[Vue warn]: You 1may have an infinite update loop in a component render function.
最新发布
05-01
当你在Vue中看到这个警告信息时，它通常表示你的组件的渲染函数中存在无限循环更新的问题。这种情况下，Vue会发现组件的状态在每次重新渲染时都发生了变化，导致无限循环的更新。 这个问题通常是由以下几种情况引起的： 1. 直接在渲染函数中修改了组件的状态：在组件的渲染函数中修改组件的状态会导致重新渲染，从而形成无限循环。应该避免在渲染函数中直接修改状态。 2. 在计算属性或侦听器中修改了相关的响应式数据：计算属性和侦听器是响应式的，当它们依赖的数据发生变化时会触发重新计算或执行相应的操作。如果在计算属性或侦听器中修改了相关的响应式数据，可能会导致无限循环更新。 3. 在子组件中使用了父组件的响应式数据并进行了修改：如果子组件直接修改了父组件传递给它的响应式数据，可能会导致父组件重新渲染，从而形成无限循环。 解决这个问题的方法有以下几种： 1. 检查渲染函数中是否有直接修改状态的代码，并将其移动到其他生命周期钩子函数中。 2. 检查计算属性和侦听器中是否有修改相关响应式数据的代码，并确保它们只是返回计算值或执行操作，而不是修改数据。 3. 如果在子组件中需要修改父组件的数据，可以通过触发自定义事件并在父组件中监听事件的方式来实现。 4. 如果以上方法都无法解决问题，可以考虑使用Vue的watch选项来监视数据的变化，并在回调函数中执行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值