解决vue生产环境,页面卡死的问题
更新时间：2023年07月01日 10:11:02 作者：夏天爱劳动
这篇文章主要介绍了解决vue生产环境,页面卡死的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue生产环境,页面卡死的解决
问题描述
开发环境没问题，本地连测试环境没问题，打包到测试环境，直接把页面整崩k，搞得接口请求啥都没问题，但是接口preview就是不返回，
解决过程
- a.起初认为是后端打包得问题，但是进过分析和后台测试，基本排除
- b.前端重新打包，问题复现，（可能是页面陷入死循环，造成网页渲染出现问题，导致preview没有返回值）
- c.本地没有问题，本地连测试环境也没出现问题，基本排除有出现死循环的可能
- d.最后发现echarts在初始化的时候会报错，最后将报错的代码删除掉。（本地也报错，但是未出现页面卡死的现象）
最后得出在项目开发中，任何一个错误都可能造成项目卡死和浏览器崩溃，所以我们需要严谨的开发项目，有错误必须解决。
vue项目页面卡死原因排查
问题描述
点击后台管理某一菜单发现直接卡死，没有其他报错信息，整个网页鼠标变为手指状态不能进行任何操作
问题排查
首先是通过注释代码发现问题是出在以下代码中
<basic-container>
<h4>教师指标数据</h4>
<avue-crud ref="crud"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
@refresh-change="refreshChange"
@search-change="searchChange">
<template slot-scope="scope"
slot="menu">
<el-button type="text"
icon="el-icon-view"
size="small"
@click="handleView(scope.row,scope.index)">查看
</el-button>
</template>
</avue-crud>
</basic-container>查看日志输出
锁定到问题是数据展示的data 需要array 但是却拿到了Object
将数据展示方式tableData改为 table:[]数组类型进行展示即可
data:{
return :{
tableData: []
]
}
getList() {
this.tableLoading = true;
this.tableData=[];
fetchList(this.listQuery).then(response => {
console.log("------------------"+response.data.data)
this.tableData.push(response.data.data) ;
this.tableLoading = false
})
},总结
这里有几个问题一个是avue 版本兼容的问题 貌似旧版本会兼容这种情况不会出现卡死的问题大佬修改框架后出现的这个问题另一个是返回值规范 如果使用表格 最好都返回list数组 不要返回单object类型导致出现类似
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue实现指定区域自由拖拽、打印功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 虚拟dom的patch源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了如何理解Vue的作用域插槽的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue全局使用axios的方法实例详解，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue源码实例挂载与编译流程实现思路详解，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了在vue路由上添加公共的路由前缀方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。这篇文章主要介绍了vue使用v-for实现hover点击效果,需要的朋友可以参考下2018-09-09
最新评论