学习VUE时出现ResizeObserver loop completed with undelivered notifications

最新推荐文章于 2024-07-13 12:43:01 发布
最新推荐文章于 2024-07-13 12:43:01 发布
阅读量1.3k 收藏 11
点赞数 11
文章标签： 学习 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code311/article/details/135017959
版权
文章讲述了作者在使用Vue创建前端页面时遇到的ResizeObserverloopcompletedwithundeliverednotifications错误，发现该问题通常与页面加载时的大小变化有关，可能是父级或子级界面布局调整导致。通过调整CSS解决了此问题。
摘要由CSDN通过智能技术生成

前几天用Vue创建前端页面时一直在报ResizeObserver loop completed with undelivered notifications这个错误，找了半天才找到错误。

这个错误源于加载时页面大小出现的问题，我这里使用的是在父级界面里加载子级小界面，我把父级界面的左边边框调小了之后这个错误就消失了。

不过有些时候也不一定是父级界面出现了问题，也有可能是因为子级界面填充不过来引起的，通过CSS调整一下大小基本这个问题就能解决。

code311
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit excee）
王佳斌
08-15 1万+
vue3 element Plus 表格组件 el-table报错，vue表格el-table浏览器拉伸缩放频繁报错，vue3使用element-plus 表格el-table反复报错出现 ResizeObserver loop limit exceeded错误解决方法，vue3 element plus报错ResizeObserver loop limit exceeded如何解决，element-plus 报错 ResizeObserver loop limit exceeded，vue3+elemen
vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发
05-27
vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的...
vue3 + Ant Design Vue: ResizeObserver loop completed with undelivered notifications.解决方法
最新发布
m0_73939789的博客
07-13 323
在使用 Vue3 结合 Ant Design Vue 的项目中遇到 “ResizeObserver loop completed with undelivered notifications.” 的报错。
vue3解决报错：ResizeObserver loop completed with undelivered notifications
weixin_68443051的博客
07-11 958
"ResizeObserver loop completed with undelivered notifications" 通常与浏览器的 ResizeObserver API 相关。这个错误通常发生在处理页面或元素尺寸变化时ResizeObserver的回调函数触发了大量的重排（reflow）或重绘（repaint），而这些操作又反过来触发了更多的尺寸变化，从而形成了一个无限循环或至少是一个效率极低的循环。（自适应窗口大小时webpack会报错）
vue + element plus：ResizeObserver loop completed with undelivered notifications
weixin_44384273的博客
04-10 5504
ResizeObserver loop completed with undelivered notifications.
ResizeObserver loop completed with undelivered notifications.
热门推荐
yes_catherine的博客
02-04 1万+
ResizeObserver介绍 ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。 const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px'; ...
Vue 学习笔记 错误ResizeObserver loop completed with undelivered notifications
xjcwzp的专栏
09-20 1万+
使用了el-table 后，容易出现如下错误。在App.vue 下面加代码。
在vue3中使用element-plus页面重置报ResizeObserver loop completed with undelivered notifications.
qq_59502044的博客
08-07 6886
在vue3中使用element-plus页面重置报错ResizeObserver loop completed with undelivered notifications.
Vue infinite update loop的问题解决
12-01
在Vue.js中，"You may have an infinite update loop in a component render function" 是一个常见的警告，这通常发生在组件渲染函数内部触发了不必要的无限更新循环。这种情况通常与计算属性（computed properties...
swiper在vue项目中loop循环轮播失效的解决方法
10-18
在Vue项目中实现Swiper的loop循环轮播功能时，我们可能会遇到轮播不生效的问题。这通常发生在使用了autoplay、loop、observer和observeParents等参数配置Swiper时。尤其是在使用v-for循环渲染Swiper组件后，立即初始...
学习vue简单项目第一天出现的问题和解决方法
01-07
p1:自己的vue没有高亮显示而且没有代码提示 1、下载vetur插件解决高亮显示 2、代码提示通过设置中的setting.json—–下图 p2：vue里的eslint 代码规则比较反人类 怎么解决 1、下载eslint插件 2、高版本用代码段复制...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
基于Vue的微服务在线学习平台前端设计源码
03-29
这是一个基于Vue的微服务在线学习平台前端设计，使用Vue、JavaScript、CSS和HTML语言开发，包含148个文件。...该项目是一个基于微服务的在线学习平台前端代码，适合用于个人学习和实践Vue的开发技术。
基于 SpringCloud 和 Vue3 的 在线学习平台
06-20
【作品名称】：基于 SpringCloud 和 Vue3 的 在线学习平台 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 基于 ...
vue-router官网文档学习
04-11
vue-router官网文档学习
基于Vue的vue-antd-design antd学习设计源码
05-24
本项目是基于Vue的vue-antd-design antd学习设计源码，包含61个文件，其中包括32个Vue文件、17个JavaScript文件、2个Markdown文件、2个JSON文件、1个Browserslistrc文件、1个Gitignore文件、1个JPG文件、1个ICO文件...
Uncaught runtime errors:ERRORR ResizeObserver loop completed with undelivered notifications.
胡子哥哥的博客
10-29 1801
该问题只出现在这个引用<el-table> 的界面，我其他界面也有引用但没有出现该问题，并且在我发现第二种方法的时候，实现成功后，我尝试删除show-overflow-tooltip代码后界面代码也刷新了，也能用，然后我重新退出登录自己设计的企业门户后又登录再次删除添加验证又不行了，有点玄学，现在目前找到的这两种方案，如果你和我类似的经历遇到类似的错误，可以试一试。解决方案说完，下面说一下，我所遇到这个问题的过程，在跟做vue项目时遇到的。里面，反正在出现这个问题页面之前的页面都行。引用于：哔哩哔哩评论。
ant-design-vue:ResizeObserver loop completed with undelivered notifications
angle12138的博客
12-14 1297
报错是在使用ant-design-vue@4.0.7版本的table组件时出现的。
vue2 resizeobserver loop completed with undelivered notifications.
12-29
根据提供的引用内容，解决"vue2 resizeobserver loop completed with undelivered notifications"错误的方法如下： 1. 使用防抖函数： ```javascript const debounce = (fn, delay) => { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); } } ``` 2. 重写ResizeObserver类： ```javascript const _ResizeObserver = window.ResizeObserver; window.ResizeObserver = class ResizeObserver extends _ResizeObserver { constructor(callback) { callback = debounce(callback, 16); super(callback); } } ``` 3. 在需要使用ResizeObserver的地方添加show-overflow-tooltip属性： ```html <el-table-column prop="title" label="标题" min-width="100" show-overflow-tooltip /> ``` 这些方法可以解决"vue2 resizeobserver loop completed with undelivered notifications"错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值