Vue项目中页面卡顿的排查与原因分析有哪些步骤？

本文共计574个文字，预计阅读时间需要3分钟。

目录问题描述问题查询小结问题描述点击后台管理某菜单一发现直接卡死，没有其他报错信息。整个网页鼠标变为手指状态，无法进行任何操作。问题查询首先，通过浏览器开发者工具的console查看是否有错误信息。然后，尝试重新加载页面，或者清理缓存后再尝试。如果问题依然存在，尝试重启浏览器或者查看浏览器版本是否最新。如果问题依然无法解决，考虑联系网站开发者或者技术支持。

目录

• 问题描述
• 问题排查
• 小结

问题描述

点击后台管理某一菜单发现直接卡死，没有其他报错信息，整个网页鼠标变为手指状态不能进行任何操作

问题排查

首先是通过注释代码发现问题是出在以下代码中

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。