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+Koa2 打包后进行线上部署的教程详解

    Vue+Koa2 打包后进行线上部署的教程详解

    这篇文章主要介绍了Vue+Koa2 打包后如何进行线上部署,给大家分享了一些问题及解决方法,需要的朋友可以参考下
    2019-07-07
  • 详解Vue的键盘事件

    详解Vue的键盘事件

    这篇文章主要为大家介绍了Vue的键盘事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vuex actions传递多参数的处理方法

    vuex actions传递多参数的处理方法

    今天小编就为大家分享一篇vuex actions传递多参数的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue scoped与深度选择器deep的原理分析

    vue scoped与深度选择器deep的原理分析

    这篇文章主要介绍了vue scoped与深度选择器deep的原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    这篇文章主要介绍了vue 数据双向绑定的实现方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue2中的keep-alive使用总结及注意事项

    vue2中的keep-alive使用总结及注意事项

    vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。本文给大家介绍vue2中的keep-alive使用总结及注意事项,需要的朋友参考下吧
    2017-12-12
  • 一文带你详细了解Vue中的v-for

    一文带你详细了解Vue中的v-for

    v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue 2.5 Level E 发布了: 新功能特性一览

    Vue 2.5 Level E 发布了: 新功能特性一览

    很高兴Vue 2.5 Level E 发布了。在这篇文章中,我们将重点介绍一些更重要的的变化:更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染
    2017-10-10
  • Vue项目中CSS Modules和Scoped CSS的介绍与区别

    Vue项目中CSS Modules和Scoped CSS的介绍与区别

    在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论