vue2+element-ui项目卡死

最新推荐文章于 2024-09-07 22:34:31 发布
原创 最新推荐文章于 2024-09-07 22:34:31 发布
· 2.2k 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webstorm #vue.js

vue2+element-ui项目，项目npm run dev成功运行到浏览器后，点击项目左侧菜单1，页面加载失败，且’卡死’(在浏览器中左侧菜单1对应页面无法使用’Ctrl+w’关闭)，
但只要点击除菜单1以外的左侧菜单，均可正常展示，
尝试重装开发工具webstorm/拉取Git上最新分支，均出现所述bug，
后来将项目依赖包卸载重装后，上述’莫名其妙的’bug修复

佩可馁稞
关注
已解决vue element 用el-tabs浏览器卡死的问题
疑问 搜索 动手 解决 记录
03-17 8180
文章最后有答案 遇到这个问题 ,起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。 经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。 困惑许久 , 查询良久 ,列出了几个网上大仙们给的答案 , 如下: 一 . 降低版本系列(已尝试 , 垃圾没有效果) 二 . 重装tabs插件,全局引入系列(已尝试 , 垃圾没有效果) 三 . 算了直接给你们放最搞笑的一个(虽然搞笑,但是是唯一一个成功的) 哈哈哈哈,没有看到这图上评论的时候 , 我和同
Vue + element-ui el-tree 虚拟滚动
p_5050的博客
04-27 4394
vue项目中使用了element-ui的el-tree树节点对数据进行了渲染，奈何数据量太大导致页面卡死或需要3s以上才可渲染出来。为了解决以上问题，查询资料对问题进行了解决，对此进行整理。希望可以帮到你。
vue+elementui查询表格数据页面卡死问题
calmboy_的博客
03-25 1883
一 问题描述 vue+elementui项目，本地idea启动，功能测试没问题，部署到tomcat服务器，查询表格数据，正确返回后，页面卡死。 浏览器console栏有vue warn信息：you may have an infinite update loop in a component render function 二 排查 debug调试，确实存在循环调用vue源码方法问题，具体原因未知。问题定位在如下代码第四行处： surveyTemplateSelect(params).then(
Electron-Vue使用element-ui el-table不显示/卡死
HH_KELE的专栏
08-12 1531
我们需要把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单里面 在这句话let whiteListedModules = ['vue']添加element-ui组件 修改为let whiteListedModules = ['vue', 'element-ui'] 再运行项目，便能够成功构建出el-t...
百万前端之vue create name 创建项目时卡住、卡死或进度条不动了
qsadmjn的博客
09-07 506
3.淘宝镜像源的证书过期了，可以通过禁用SSL，暂时解决，一般太久没有用脚手架创建vue项目都会出现这个问题。创建vue2项目时，使用脚手架创建项目时出现意外卡住，导致无法创建项目时要怎么解决呢？区分以下几种情况，一步步对原因进行排查，如前一步未解决就需要进行下一步。2.npm和Node.js的版本问题，尝试更新npm到最新版本。1.网络问题，造成卡顿；通过重新设置一下淘宝镜像。
vue创建项目的时候卡顿，比较慢
qq_42165062的博客
10-17 3155
3.0用vue create xxxx 创建项目时，一直出现卡顿，导致无法创建项目
使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
Xiaoxiplus的博客
05-13 624
问题描述： 需求是需要在dialog中嵌套dialog，子dialog中嵌套四个tab页，代码中没有对tab页进行显示控制，导致第一次打开时正常，关闭一次后再次打开，浏览器会卡死，电源使用情况暴增，内存占用率很大 解决： 给tab页添加v-if条件 <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> &
详解vue-cli+element-ui树形表格(多级表格折腾小计)
12-29
最近在项目开发中需要做一个多级表格，树形表格的功能，看看element-ui上没有，自己开是折腾，话不多说，上思路和代码。 效果图： 可点击收缩，展开。 一，首先创建一个公共的文件夹treeTable,里边放一个index.vue...
vue3+vite2+element-plus+ts搭建一个项目
奔跑的痕迹的博客
10-24 5670
花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 数据管理系统，使用静态数据模拟动态路由，路由拦截，登录页面鉴权等，使用了iconify图标数据 预览 搭建中踩过动态路由生产环境报错，json循环依赖，路由跳转 ‘window.webkitStorageInfo’ is deprecated. 浏览器卡死等问题 但这些都已经处理了，这个简单系统下载就可以使用，喜欢的自取，顺便给个star，3Q. ...
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2305
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
weixin_48226213的博客
02-16 856
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
element-ui tabs组件导致页面假死浏览器崩溃
WANG_AFei的博客
03-13 2446
环境：vue2.6.10 element-ui 2.11.0 问题：缩小浏览器窗口/将页面放大/屏幕分辨率过低导致 页面假死，浏览器崩溃 确实是tabs导致的，将页面中的tabs标签注掉完全没有这个问题 网上百度了好多解决方法，说一下 方案一： vue升级2.6+版本 或element版本降级 然而我的版本没有问题，但是出于敬畏的心里，还是尝试了一下，然而这个方法并不适用于我的问题 方...
关于vue2+vite+wujie使用wangeditor异常问题解决方案
xhYuTian的博客
08-04 756
如果在主应用中注册，子应用直接使用组件会导致图片不能拖拽放大缩小问题，目前还未解决，如有解决方案请告知 ，因为找了好几天的原因 为了防止各位调入坑中，在此提出解决方案。页面代码中使用const { createEditor, createToolbar } = window.wangEditor拿到组件后创建富文本编辑器。在子应用根目录的index.html中以链接的方式引入依赖。
使用ElementUI+Vue卡死以及伪循环依赖问题
weixin_43731884的博客
05-11 931
概述：今天代码写完后运行测试时出现页面无限加载的问题，如图
Vue 性能革命：揭秘前端优化的终极技巧；Vue优化技巧，解决Vue项目卡顿问题
RenGJ010617的博客
07-05 3097
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了，但现在随着AI时代的到来，海量数据场景会越来越多，Vue优化技巧也是必备技能。
element-ui的table使用height属性卡死
u013844333的博客
06-10 1348
使用height、max-height会导致vue页面卡死，解决方法就是将tabledata的值修改。 默认是tabledata：{}，只需要修改成
解决 vue 开发过程中 卡顿的问题 ，退出严格模式
joshua2046的博客
08-09 1690
解决vue 开发过程中卡顿，退出严格模式
关于vue2+ts项目在谷歌（Chrome）浏览器中刷新导致内存泄漏的问题
weixin_44416058的博客
02-02 789
后来我换了Edge浏览器以及火狐浏览器，发现这俩个浏览器都没有出现内存泄漏的问题，所以初步判断，应该是chrome更新了版本，刷新机制和vue2项目不兼容。最近在写vue2项目的时候，发现网页长时间开发过程中越来越卡，后来发现当刷新页面时，每次都不会释放内存，导致内存越来越大。然后我试着删除可能有问题的模块，最后一直把所有模块都删除了，只剩一个首页页面，还是一样的情况，简直是一筹莫展。开发环境：vue: 2.6.14、vue-property-decorator：^8.4.2。
vue+element开发项目，使用tab页的时候导致浏览器卡死的解决办法
Z_Joker_J的博客
06-05 1715
el-tabs导致浏览器卡死问题 用了vue-element-template模版二次开发，项目中需要用到el-tabs 结果一用就卡死。 根据网上建议，在<el-tab-pane>标签里不放任何元素，可以。 但是无法满足项目需求。 于是继续找， 最后确定是element和vue版本冲突问题。 目前elemntUI的最新版本是2.13.0，vue版本是 "vue": "^2.6.11", "vue-aplayer": "^1.6.1", "vue-rout...
用vue项目管理器创建vue项目卡死
最新发布
03-08
### 浏览器卡死原因分析 当使用 Vue 项目管理器创建并运行 Vue 项目时遇到浏览器卡死的情况，通常可以从以下几个方面来考虑： #### 内存泄漏检测 通过观察任务管理器中的内存占用情况可以发现，在进行频繁的点击选择交互操作过程中，内存持续增长。这表明可能存在内存泄漏问题。为此，建议利用 `vue-devtools` 的性能面板 (`Performance`) 来监控应用的行为，识别潜在的性能瓶颈和资源消耗过高的组件或函数调用[^1]。 #### 组件渲染优化 对于模板编译而言，虽然最终呈现在网页上的并不是直接由 `.vue` 文件里的 `<template>` 标签所定义的内容，而是经过 Vue 编译器转换成的真实 DOM 节点结构；然而复杂的嵌套或者大量的动态绑定可能会增加初始加载时间和重绘成本。因此应当简化不必要的复杂逻辑表达式以及减少过多的数据监听依赖关系，从而提高整体效率[^2]。 #### JavaScript 垃圾回收机制理解 JavaScript 使用 mark-and-sweep (标记清除) 方式的垃圾收集算法来进行自动化的内存管理。这意味着程序中不再使用的对象会被定期清理掉以释放空间给新的分配请求。但如果某些大尺寸的对象被意外保留下来，则可能导致可用堆大小逐渐缩小直至耗尽，进而引发 OOM 错误或者其他形式的应用不稳定现象。所以要特别注意避免全局变量滥用、闭包陷阱等问题造成隐含引用阻止了及时有效的 GC 进程执行[^3]。 #### 特定场景下的表现差异 有报告指出特定 UI 库组件如 Element Plus 中的 Tabs 可能在内容为空的情况下工作良好，但是一旦加入实际数据填充后反而容易触发异常状况比如浏览器无响应甚至崩溃。针对这种情况可以通过调整子项数量、分页显示等方式降低单次绘制压力，并且确保每次更新都伴随着合理的销毁旧实例过程而不是简单累积新状态[^4]。 ```html <!-- 示例：限制每页展示条目数 --> <el-pagination layout="prev, pager, next" :total="dataList.length"> </el-pagination> ``` ### 实施策略总结 综合以上几点因素考量之后，推荐采取如下措施改善当前项目的稳定性和流畅度： - 定期审查代码质量，移除冗余计算； - 对于大型列表采用懒加载技术延迟初始化非可视区域内的元素； - 尽量保持作用域最小化原则编写简洁明了易于维护的功能模块； - 关注第三方库版本兼容性及其官方文档给出的最佳实践指导方针。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值