vue项目中请求数据特别多导致页面卡死

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量6.4k 收藏 8
点赞数 2
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47987261/article/details/123481159
版权

1. 在平时开发中经常会碰到数据量特别大，请求接口时导致页面卡死或者崩溃的情况

 

上图这里就是因为数据太大导致页面在数据请求回来之前一直处于卡死的状态，这种时候可以使用freeze方法来为数组赋值，将 this.xxx = res 改为 this.xxx = Object.freeze(res) ，仅供参考。

ps: 本人小白一枚，目前我碰到的是可以用这种方法解决

不会编程的程序员.
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue页面白屏 卡死
weixin_44735965的博客
01-11 1156
项目场景：项目开发时遇到后端返回的数据量很大，这些数据要渲染在el-table组件中。并且没有做分页功能时，程序面临卡死和白屏的问题。
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
页面崩溃了！记录一次测试中出现的前端内存溢出现象
deerxiaoluaa的博客
12-27 2540
前几天在一次web应用测试过程中，前端发起了向后端接口的查询请求，由于后端响应较慢，前端一直处于等待响应返回状态。在几分钟后，突然页面出现让人惊悚的“噢噢，页面崩溃了”几个大字。
2024年vue数据太多导致页面卡顿解决办法_vue下拉框数据过多卡顿的原因，花三分钟看完这篇文章你就懂了
2401_84411522的博客
05-04 955
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
vue项目中由于大量数据渲染导致的页面卡顿（基于antdv）
qq_41675930的博客
01-29 3591
近期项目中遇到一个由于两个兄弟组件数据联动产生大量数据导致的页面卡顿问题。主要业务是：规格组可多次添加，每个规格组的数量相乘导致生成的table表格数据成指数级增长；如下图：。由此页面会出现大量重绘、dom渲染导致页面卡顿。解决过程记录一下。
vue中循环中写异步请求导致页面不生效
weixin_49203377的博客
12-07 119
vue中循环中写异步请求导致页面不生效问题 效果如下： 但是页面这一列没生效，是因为前端循环是同步的 接口请求是异步的 没法在循环里面请求接口 解决办法：循环是同步的没发暂停 你怎么暂停呢所以用await 解决如下：
axios 接口请求失败导致页面卡死问题
朕的博客
12-23 2666
这个问题的主要原因是因为调用axios的时候没有写catch方法，导致页面卡死 Axios({ ...config }).then(res=>{ //这里处理正确返回 }).catch(error=>{ //这里处理错误情况，如果不处理也必须写上catch方法 }) ...
vue,定时器刷新导致卡死
2301_81079328的博客
01-19 758
项目中明明设置了定时请求，发现没有清除定时器队列，多个定时器发请求导致页面崩溃。
VueTreeselect组件的async开启导致的请求一次比一次慢最终导致页面卡死问题之终极解决方案
BayMin0-0的博客
07-25 852
代码】VueTreeselect组件的async开启导致的请求一次比一次慢最终导致页面卡死问题之终极解决方案。
vue 页面卡顿(数据量大)
2c不高兴的博客
03-08 2694
Vue 卡顿优化
vue中接口返回数据过大回显导致页面崩溃解决方法
xiehonglin88的博客
10-20 7737
@ 问题描述： vue中接口返回数据过大到div中回显 div代码如下 <div style="padding: 10px;min-height: 60px;border: 1px solid #dcdcdc;border-radius: 4px;"> {{ JSON.stringify(interfaceReturnData) }} </div> 测试接口返回数据量为1.4Mb 导致页面崩溃~~~~ 原因分析： 具体原因技术有限不明确，单从代码调试看，里面有个ne
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
在Vue.js开发过程中，经常会遇到页面初始化时由于数据还未加载完成而导致访问数据字段时出现`undefined`的错误。这个问题通常是由于Vue组件的生命周期导致的，因为Vue组件在数据请求完成前就已经进行了初次渲染。...
vue如何从接口请求数据
08-30
在本文中，我们将介绍如何使用Vue.js从接口请求数据，并将其应用于实际项目中。通过本文，您将了解到如何使用Vue.js的生命周期钩子函数、methods、数据绑定等概念来实现数据请求和处理。 生命周期钩子函数 在Vue....
vue 请求后台数据的实例代码
08-30
在 Vue 项目中，我们可以使用 Vue.Resource 库来实现数据请求。首先，我们需要在入口函数中引入 VueResource，并使用 Vue.use(VueResource) 来启用它。然后，我们可以使用 this.$http.get 或者 this.$http.post 来...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 215
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 281
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
vue 项目发起请求前，先获取请求数据
06-01
在 Vue 项目中，在发起请求前获取请求数据可以使用一些生命周期钩子函数和实例属性。例如，可以使用 `created` 钩子函数来在组件实例创建完成后获取请求数据，然后在 `mounted` 钩子函数中发起请求。具体代码实现如下： ```javascript export default { data() { return { requestData: null }; }, created() { // 在这里获取请求数据 this.requestData = { /* 请求数据 */ }; }, mounted() { // 在这里发起请求，可以使用 requestData axios.get('/api/data', { params: this.requestData }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } } ``` 另外，也可以使用实例属性来获取请求数据，例如使用 `data`、`props`、`computed` 等属性来定义请求数据，然后在发起请求时直接使用即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值