vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
vue請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死
1. 在平時(shí)開發(fā)中經(jīng)常會(huì)碰到數(shù)據(jù)量特別大，請(qǐng)求接口時(shí)導(dǎo)致頁面卡死或者崩潰的情況
上圖這里就是因?yàn)閿?shù)據(jù)太大導(dǎo)致頁面在數(shù)據(jù)請(qǐng)求回來之前一直處于卡死的狀態(tài)，這種時(shí)候可以使用freeze方法來為數(shù)組賦值，將 this.xxx = res 改為 this.xxx = Object.freeze(res) ，僅供參考。
ps: 本人小白一枚，目前我碰到的是可以用這種方法解決
vue項(xiàng)目頁面卡死原因排查
問題描述
點(diǎn)擊后臺(tái)管理某一菜單發(fā)現(xiàn)直接卡死，沒有其他報(bào)錯(cuò)信息，整個(gè)網(wǎng)頁鼠標(biāo)變?yōu)槭种笭顟B(tài)不能進(jìn)行任何操作
問題排查
首先是通過注釋代碼發(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ù)組類型進(jìn)行展示即可
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é)一下
這里有幾個(gè)問題
一個(gè)是avue 版本兼容的問題 貌似舊版本會(huì)兼容這種情況不會(huì)出現(xiàn)卡死的問題
大佬修改框架后出現(xiàn)的這個(gè)問題
另一個(gè)是返回值規(guī)范 如果使用表格 最好都返回list數(shù)組 不要返回單object類型導(dǎo)致出現(xiàn)類似
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue經(jīng)歷從2.0到3.0更新之后,簡(jiǎn)??之就是變得更輕更快,使?起來更加?便,下面這篇文章主要給大家介紹了關(guān)于vue3.0和vue2.0區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue自定義樹形控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
最近做項(xiàng)目遇到在線預(yù)覽和下載pdf文件,試了多種pdf插件,例如jquery.media.js(ie無法直接瀏覽),最后選擇了pdf.js插件,這篇文章主要介紹了Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能的相關(guān)資料,需要的朋友可以參考下2025-04-04
Vue如何實(shí)現(xiàn)u-form多個(gè)form表單同時(shí)校驗(yàn)
在 Vue 項(xiàng)目中使用 UView UI 的 u-form 組件時(shí),多個(gè)表單同時(shí)校驗(yàn)的需求非常常見,本文主要介紹了如何使用 u-form 組件實(shí)現(xiàn)多個(gè)表單同時(shí)校驗(yàn),需要的可以參考一下2025-01-01
Vue3中的?computed,watch,watchEffect的使用方法
這篇文章主要介紹了Vue3中的?computed,watch,watchEffect的使用方法，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)價(jià)值，需要得小伙伴可以參考一下2022-06-06
這篇文章主要介紹了vue父子模板傳值問題解決方法,結(jié)合案例形式分析了vue.js父子模板傳值問題相關(guān)實(shí)現(xiàn)方法與具體操作步驟,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue的全局過濾器和私有過濾器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04