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经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了Vue自定义树形控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家介绍了vue中多个文件下载实现打包压缩下载的发发示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览),最后选择了pdf.js插件,这篇文章主要介绍了Vue中使用pdf.js实现PDF文档展示功能的相关资料,需要的朋友可以参考下2025-04-04
在 Vue 项目中使用 UView UI 的 u-form 组件时,多个表单同时校验的需求非常常见,本文主要介绍了如何使用 u-form 组件实现多个表单同时校验,需要的可以参考一下2025-01-01
Vue3中的 computed,watch,watchEffect的使用方法
这篇文章主要介绍了Vue3中的 computed,watch,watchEffect的使用方法，文章围绕主题展开详细的内容介绍，具有一定的参考价价值，需要得小伙伴可以参考一下2022-06-06
这篇文章主要介绍了vue父子模板传值问题解决方法,结合案例形式分析了vue.js父子模板传值问题相关实现方法与具体操作步骤,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue filter 完美时间日期格式的方法，文中给大家提到了vue filter方法-时间格式化 的代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
<keep-alive> 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染,这意味着当组件在<keep-alive> 内部切换时,其状态将被保留,而不是被销毁和重新创建,这篇文章主要介绍了Vue中的keep-alive缓存组件的理解,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue的全局过滤器和私有过滤器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论