vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
更新时间：2023年07月18日 09:41:17 作者：T@Nn€
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用element-ui的el-tabs组件导致浏览器崩溃卡死
问题
vue2项目使用el-tabs组件时，浏览器会白屏卡死。
原因
查看package.json文件发现当前vue版本为2.5.10，当前elementUI版本为2.15.1。
搜索相关资料发现是因为vue版本过低 element-ui过高导致。
解决：更新vue版本
pakeage.json:
- "element-ui": "2.13.0",
- "vue": "2.6.10",
- "vue-template-compiler": "2.6.10"
vue出现caution:request is not finished yet导致页面卡死
问题描述
开发环境正常运行，部署上线后点击某一按钮请求接口时页面出现卡死。
在Network=>Timing发现异常提示：
caution:request is not finished yet
问题分析
（1）通过Postman模拟请求接口，接口正常。
（2）本地部署前端代码，ip和localhost访问时页面不会出现卡死问题。此时我有点怀疑人生，既然都是部署，那就彻底一点，通过内网映射的域名访问前端，终于还原卡死的异常问题。
（3）还原异常问题还是不够，我需要找到问题所在位置。因为只有点击对应的那个按钮才会出现页面卡死问题。所以将点击事件逐一排查，排查的方式简单粗暴，就是排除法，通过注释一段段代码调试。
（4）最后发现是这串代码有问题，min>max会导致死循环（项目实际最大最小值会以参数控制）
其实在开发环境点击按钮时，Console中Vue已经打印警告提示
注意
页面出现卡死的具体原因各种各样，但大部分都是由于死循环导致的，如果你也遇到此类问题，可以通过Console异常提示，还有排除法（通过注释相关代码排除，找到出现问题的位置）解决问题。
根据自己的代码有技巧使用排查手段分析问题，毕竟由于死循环出现卡死问题的场景不一。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下2022-10-10
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
这篇文章主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要给大家介绍了关于vue中路由传参以及跨组件传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了详解vue/cli 3使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。下面这篇文章主要给大家介绍了关于vue具名插槽基本使用的相关资料，需要的朋友可以参考下2021-05-05
本文主要介绍了vue2之vue.config.js最全配置教程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧2023-01-01
这篇文章主要介绍了vue 使用el-table循环生成表格的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下2023-10-10
最新评论