溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了vue中出現無限循環怎么辦，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
項目中遇到了這樣一個問題：每一種產品有對應的服務費，每一個商家有多種商品要單獨計算每一家的服務費，最后匯總總的服務費用。我直接寫了一個方法來計算出每個商家和總的服務費用并return出來。如果不看控制臺的話運行是沒問題的。但是控制臺報了無限循環的錯誤。
下面是錯誤代碼
html：
js：
這里會出現無限循環的原因是數據更新觸發計算方法來更新視圖，視圖更新又反過來觸發這個方法更新數據。所以盡量不要直接在綁定的數據上使用方法來綁定。找到問題后下面就是解決辦法。
因為選中商品后就要重新計算價格。所以我將選中的商品添加到data里面
然后通過偵聽器監聽totalBox的變化
當totalBox變化后在執行計算方法。這樣就避免一直來回計算的問題
補充知識：vue 排序無限循環問題解決
在vue里對每個數組排序，會出現無限循環的問題，我認為的原因是:
vue動態監聽data里數組的變化，數組剛一排序發生變化，vue立馬重新執行排序導致無限循環。
解決問題：
1、將要排序的數組命名為全局變量，這樣不受vue的監聽
2、全局數組賦值vue里的數組時，不要使用=號，這樣只是把全局數組的地址指向vue數組地址(用遍歷vue數組，push進全局數組里)
代碼片段 對數組對象屬性進行排序（**************************為解決思路）：
var sloveSortList = []; //解決vue中數組排序無限循環的問題 **************************
export default {
data() {
return {
showSectionList: [], //界面需要顯示的斷面,還沒有進行排序
watch:{
//列表發生變化
showSectionList: function(){
//傳遞點位列表數據，給父級reallndex.vue頁面
this.leftshowSection(this.showSectionList);
//把showSectionList數組賦值給sloveSortList，如果直接=，相當于引用地址，排序的時候vue監聽showSectionList會出現無限循環。
sloveSortList = [];
for(var i=0; i < this.showSectionList.length; i++ ){
sloveSortList.push(this.showSectionList[i]); **************************
}
//把變化了的列表賦值到準備要排序的sortShowSectionData上
this.sortShowSectionList = this.sortShowSectionData() **************************
//賦值排好序的數組，為了搜索使用
this.beforeSearchList = this.sortShowSectionList;
//默認選中第一個斷面傳遞給父組件
this.showSectionClick(0);
}
methods: {
//列表排序方法
sortShowSectionData:function(){
var factorNumber = this.nowFactor.factor_code+ 'Level';
if(this.nowFactor.factor_code == undefined || this.nowFactor.factor_code == 'NaN' || this.nowFactor.factor_code == null){
return
}
//對列表進行了排序
var searchList = sloveSortList.sort((a,b)=>{ **************************
var factorNumber = this.nowFactor.factor_code;
if(parseFloat(a[factorNumber]) > parseFloat(b[factorNumber])){
return -1;
} else if(parseFloat(a[factorNumber]) == parseFloat(b[factorNumber])){
return 0;
}else{
return 1;
}
});
return searchList;
},以上就是關于vue中出現無限循環怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
