快捷導(dǎo)航

vue項目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決

更新時間：2022年09月24日 09:54:58 作者：不會編的程序員

這篇文章主要介紹了vue項目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue請求數(shù)據(jù)特別多導(dǎo)致頁面卡死

1. 在平時開發(fā)中經(jīng)常會碰到數(shù)據(jù)量特別大，請求接口時導(dǎo)致頁面卡死或者崩潰的情況

上圖這里就是因為數(shù)據(jù)太大導(dǎo)致頁面在數(shù)據(jù)請求回來之前一直處于卡死的狀態(tài)，這種時候可以使用freeze方法來為數(shù)組賦值，將 this.xxx = res 改為 this.xxx = Object.freeze(res) ，僅供參考。

ps: 本人小白一枚，目前我碰到的是可以用這種方法解決

vue項目頁面卡死原因排查

問題描述

點擊后臺管理某一菜單發(fā)現(xiàn)直接卡死，沒有其他報錯信息，整個網(wǎng)頁鼠標(biāo)變?yōu)槭种笭顟B(tài)不能進行任何操作

問題排查

首先是通過注釋代碼發(fā)現(xiàn)問題是出在以下代碼中

    <basic-container>
      <h4>教師指標(biāo)數(shù)據(jù)</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>

查看日志輸出

鎖定到問題是數(shù)據(jù)展示的data 需要array 但是卻拿到了Object

將數(shù)據(jù)展示方式tableData改為 table:[]數(shù)組類型進行展示即可

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
        })
      },

小結(jié)一下

這里有幾個問題

一個是avue 版本兼容的問題貌似舊版本會兼容這種情況不會出現(xiàn)卡死的問題

大佬修改框架后出現(xiàn)的這個問題

另一個是返回值規(guī)范如果使用表格最好都返回list數(shù)組不要返回單object類型導(dǎo)致出現(xiàn)類似

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: