前言最近突然发现了ResizeObserver感觉挺有用的就简单学习了一下。众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。而ResizeObserver可以监听到Element的内容区域或SVGElement的边界框改变。内容区域则需要减去内边距padding。参考：webAPIResizeObserver使用兼容性兼容性还是可以的，当

ResizeObserverlooplimitexceeded报错解决方案背景​公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserverlooplimitexceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。问题原因elementui中table组件的resize回调代码如下/*istanbulignorenext*/exportconstaddResizeListener=function(element,fn){if(isServer)return;if(!element.__resiz

问题出现，在Vue3中引入了elementui相关报错关于今天在Vue3中遇到的Property"size"wasaccessedduringrenderbutisnotdefinedoninstance.然后还报错了ResizeObserverlooplimit/(ㄒoㄒ)/~~出现的报错意思是"属性'xxx(size)'在渲染期间被访问，但未在实例上定义"引入elementui中Vue3template里的相关代码 解决方案(☆▽☆)只需要在对应的组件中在实例中定义即可😊import{ref}from'vue'exportdefault{name:'MyProject',setup(){c

Uncaughtruntimeerrors:×ERRORResizeObserverlooplimitexceededathandleError(webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:252:58)ateval(webpack-internal:///./node_modules/webpack-dev-serve问题原因：使用了el-table组件+弹性布局el-table:data="tableData"borderstripe>el-table-columnprop="id"labe

不多说，报错信息就长上面这个样子，网上找了很多方案都没解决，例如在onerror钩子中忽略这个错误，所以我上我的解决方案，代码如下：constdebounce=(fn,delay)=>{lettimer=null;returnfunction(){letcontext=this;letargs=arguments;clearTimeout(timer);timer=setTimeout(function(){fn.apply(context,args);},delay);}}const_ResizeObserver=window.ResizeObserver;window.ResizeObse

项目场景：vue3项目使用elementplus的el-table组件，在切换页面时报错问题描述报错信息为：ResizeObserverlooplimitexceededateval(webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)如下图：相关代码如下：el-table:data="tableData"borderstyle="width:100%;"> el-table-columnprop="name"label="品牌"width="180">el-table-column>el