項目中遇到了這樣一個問題：每一種產(chǎn)品有對應(yīng)的服務(wù)費(fèi)，每一個商家有多種商品要單獨(dú)計算每一家的服務(wù)費(fèi)，最后匯總總的服務(wù)費(fèi)用。我直接寫了一個方法來計算出每個商家和總的服務(wù)費(fèi)用并return出來。如果不看控制臺的話運(yùn)行是沒問題的。但是控制臺報了無限循環(huán)的錯誤。

下面是錯誤代碼

html：

js：

這里會出現(xiàn)無限循環(huán)的原因是數(shù)據(jù)更新觸發(fā)計算方法來更新視圖，視圖更新又反過來觸發(fā)這個方法更新數(shù)據(jù)。所以盡量不要直接在綁定的數(shù)據(jù)上使用方法來綁定。找到問題后下面就是解決辦法。

因為選中商品后就要重新計算價格。所以我將選中的商品添加到data里面

然后通過偵聽器監(jiān)聽totalBox的變化

當(dāng)totalBox變化后在執(zhí)行計算方法。這樣就避免一直來回計算的問題

補(bǔ)充知識：vue 排序無限循環(huán)問題解決

在vue里對每個數(shù)組排序，會出現(xiàn)無限循環(huán)的問題，我認(rèn)為的原因是:

vue動態(tài)監(jiān)聽data里數(shù)組的變化，數(shù)組剛一排序發(fā)生變化，vue立馬重新執(zhí)行排序?qū)е聼o限循環(huán)。

解決問題：

1、將要排序的數(shù)組命名為全局變量，這樣不受vue的監(jiān)聽

2、全局?jǐn)?shù)組賦值vue里的數(shù)組時，不要使用=號，這樣只是把全局?jǐn)?shù)組的地址指向vue數(shù)組地址(用遍歷vue數(shù)組，push進(jìn)全局?jǐn)?shù)組里)

代碼片段 對數(shù)組對象屬性進(jìn)行排序(**************************為解決思路)：

var sloveSortList = []; //解決vue中數(shù)組排序無限循環(huán)的問題 **************************

export default {

data() {

return {

showSectionList: [], //界面需要顯示的斷面,還沒有進(jìn)行排序

watch:{

//列表發(fā)生變化

showSectionList: function(){

//傳遞點(diǎn)位列表數(shù)據(jù)，給父級reallndex.vue頁面

this.leftshowSection(this.showSectionList);

//把showSectionList數(shù)組賦值給sloveSortList，如果直接=，相當(dāng)于引用地址，排序的時候vue監(jiān)聽showSectionList會出現(xiàn)無限循環(huán)。

sloveSortList = [];

for(var i=0; i < this.showSectionList.length; i++ ){

sloveSortList.push(this.showSectionList[i]); **************************

}

//把變化了的列表賦值到準(zhǔn)備要排序的sortShowSectionData上

this.sortShowSectionList = this.sortShowSectionData() **************************

//賦值排好序的數(shù)組，為了搜索使用

this.beforeSearchList = this.sortShowSectionList;

//默認(rèn)選中第一個斷面?zhèn)鬟f給父組件

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

}

//對列表進(jìn)行了排序

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中的無限循環(huán)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue本地没事放到服务器上无限循环,解决vue中的无限循环问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。