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类型导致出现类似

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • 解决Vue input输入框卡死的问题

    解决Vue input输入框卡死的问题

    原因 我把 vuex 全局变量 $store.state.search.key 绑定到 v-model 上,然后在页面挂载时通过代码修改 $store.state.search.key 的值,最后在页面上输入任意值 input 框就卡住了 解决方法 1.input 标签增加 @input 属性 <input v-model='$store.state.search.key' @input="forceUpdateInput"> 2.methods 中增加对应方法 force

  • vue 项目页面卡死原因排查分析

    vue 项目页面卡死原因排查分析

    目录 问题描述 问题排查 小结 问题描述 点击后台管理某一菜单发现直接卡死,没有其他报错信息,整个网页鼠标变为手指状态不能进行任何操作 问题排查 首先是通过注释代码发现问题是出在以下代码中 <basic-container> <h4>教师指标数据</h4> <avue-crud ref="crud" :data="tableData" :table-loading="tableLoading" :opti

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

  • vue项目页面嵌入代码块vue-prism-editor的实现

    需求: 1. 可输入代码,并且代码语法高亮 2. 支持编辑和不可编辑模式 3. 提交到后端到代码内容为字符串格式 实现 在gitbug上找到vue-prism-editor,可以满足以上需求. 使用 1.安装vue-prism-editor npm install vue-prism-editor 由于vue-prism-editor需要依赖 prismjs,所以还需要安装prismjs npm install prismjs 2.在需要使用vue-prism-editor的组件中引入 impo

  • vue项目页面的打印和下载PDF加loading效果的实现(加水印)

    目录 vue页面的打印和下载PDF(加水印) vue项目页面的打印 vue项目页面下载PDF 封装异步PDF下载函数并添加loading效果 总结 vue页面的打印和下载PDF(加水印) vue项目页面的打印 打印的不用说,调用 window.print() 的方法即可: 注意点:如果用到背景图的话,需要CSS中添加设置: // 标签看哪些地方用到背景图就加哪些,不然调打印机会把背景图隐藏掉 div { // webkit 为Google Chrome Safari 等浏览器内核 -webkit

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • vue项目在安卓低版本机显示空白的原因分析(两种)

    vue项目在安卓低版本机显示空白原因: 可能的原因一 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网上找到方法如下: https://www.jb51.net/article/146840.htm 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save 2.main.js引入  impor

  • vue项目在线上服务器访问失败原因分析

    珊妹儿遇到一个奇葩问题哈,跟大家伙来分享分享,首先因为刚接手的项目,我还没有线上服务器的连接信息,前端代码都是我打包好给别人,别人传到服务器的,传到线上服务器访问不了,这就是中间出现了问题. 所谓,打包就是压缩的概念,而压缩文件再次压缩就会导致文件成倍的增大,这中间就出现了很多问题,我们排除了很多问题都没找见原因,后来我就寻思拿U盘拷一份再试试,结果成功了!!!!! 据珊妹儿多年经验来分析,用U盘直接拷贝的是源文件,而压缩完传过去的压缩包再解压缩,就不是原来的文件了!嗯 应该是这个原因.....

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

随机推荐