问题描述：

vue中接口返回数据过大到div中回显
div代码如下

<div  style="padding: 10px;min-height: 60px;border: 1px solid #dcdcdc;border-radius: 4px;">{{ JSON.stringify(interfaceReturnData) }}
</div>

测试接口返回数据量为1.4Mb

导致页面崩溃~~~~

原因分析：

具体原因技术有限不明确，单从代码调试看，里面有个nextTick，里面有个方法走的时候崩了，怀疑是触发dom更新太多啥的

解决方案：

给div加上唯一id属性，直接使用原生dom对象通过获取id直接赋值

<div id="interfaceReturnData" style="padding: 10px;min-height: 60px;border: 1px solid #dcdcdc;border-radius: 4px;"><!-- {{ JSON.stringify(interfaceReturnData) }} -->
</div>

// this.interfaceReturnData= res.data.result  原先的赋值方式
document.getElementById('interfaceReturnData').innerHTML = res.data.result // 现在这样赋值

解决问题！困扰许久，特此记录！

vue中接口返回数据过大回显导致页面崩溃解决方法相关推荐

Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
vue中使用v-if出现的值回显不了的问题
vue中使用v-if出现的值回显不了的问题这样会有其中某一个值回显不了的问题, 去掉v-if可以正常回显加上之后会莫名不回显解决方法:外边包个div就可以了如果还解决不了 div别再太外围 ...
接口返回数据太大_Vue实战044：Mockjs模拟服务器Api接口并返回数据详解
前言现在越来越多项目都采用前后端分离模式开发,这样前后端就可以同时开发,而且互不影响.但是目前项目跟进的很紧,没什么时间写后台,但是前端没接口测试可能会隐藏很多bug,到后面再来排查就麻烦了.所以在 ...
vue根据接口返回数据状态给按钮动态设置disabled属性
这里写自定义目录标题 1种 html data 方法 2种 html data 方法最后 1种 html <b-button variant="success" @clic ...
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空.控制台显示并没有获取到任何值,但是input中确实有字母.纳尼?说好的双向绑定呢? 要解决这个问题可以采用watch+keyup事 ...
vue 中监听document.body.scrollTop 值总为0的解决方法
// 基础资料网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; scrollTop 设置或获取位于对象最顶 ...
接口返回数据太大_阿里工程师教你 3 分钟实现数据源编排和接入
作者| 阿里文娱高级开发工程师天甘慕理责编 | 屠敏头图 | CSDN 下载自东方 IC 背景你一定也深有同感,在开发业务需求时,1/3是时间都花费在了前期准备工作上.比如,调研数据来自哪里 ...
vue关于接口请求数据过大导致浏览器崩溃
做vue后台的时候,有一个导出所有用户数据的需求,我这里是前端导出,用的是iview的exportCsv方法,在这里说说遇到的问题吧.首先看这里,查询的时候,Size有155MB,最开始在谷歌.火狐之 ...
vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法
前言在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 update age with 25 e ...
ViewState 数据太大影响性能导致页面报错
案件背景: 工作中的一个报表之前一直工作正常,但是有一天突然用户打开报错,提示view state 无效.检查代码发现没有问题,检查前台页面后发现报表显示后的viewstate大小居然达到40M以上. ...

vue中接口返回数据过大回显导致页面崩溃解决方法

问题描述：

原因分析：

解决方案：

vue中接口返回数据过大回显导致页面崩溃解决方法相关推荐

最新文章

热门文章