vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目页面卡死原因排查

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

作者:lMasterSparkl

这篇文章主要介绍了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类型导致出现类似

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文