vue项目中请求数据特别多导致页面卡死的解决
更新时间：2022年09月24日 09:54:58 作者：不会编的程序员
这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue请求数据特别多导致页面卡死
1. 在平时开发中经常会碰到数据量特别大，请求接口时导致页面卡死或者崩溃的情况
上图这里就是因为数据太大导致页面在数据请求回来之前一直处于卡死的状态，这种时候可以使用freeze方法来为数组赋值，将 this.xxx = res 改为 this.xxx = Object.freeze(res) ，仅供参考。
ps: 本人小白一枚，目前我碰到的是可以用这种方法解决
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控制元素显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了在Vue中使用antv的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
详解在vue-cli3.0中自定css、js和图片的打包路径
这篇文章主要介绍了详解在vue-cli3.0中自定css、js和图片的打包路径，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要给大家介绍了关于vue3 Table分页保留选中状态的相关资料,vue table组件是一个非常方便的表格组件,它可以帮助我们实现分页和选中功能,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件，实现页面渲染等步骤，需要的小伙伴可以参考一下2021-12-12
这篇文章主要介绍了详解vue 兼容IE报错解决方案，详细的介绍了几种原因及其解决方案，非常具有实用价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了mpvue 项目初始化及实现授权登录的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下2022-06-06
监听属性可以针对某个属性进行监听,当监听的属性的值发生了变化,则会执行相应的函数,下面这篇文章主要给大家介绍了关于Vue监听属性的相关资料,需要的朋友可以参考下2021-11-11
最新评论