vue 項目頁面卡死原因排查分析

Posted on by

問題描述

點擊後臺管理某一菜單發現直接卡死，沒有其他報錯信息，整個網頁鼠標變為手指狀態不能進行任何操作

問題排查

首先是通過註釋代碼發現問題是出在以下代碼中

    <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類型導致出現類似

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：