解决vue中的无限循环问题

站长资源 2024/11/24 佚名

78 1538 78

DDR爱好者之家 Design By 杰米

项目中遇到了这样一个问题：每一种产品有对应的服务费，每一个商家有多种商品要单独计算每一家的服务费，最后汇总总的服务费用。我直接写了一个方法来计算出每个商家和总的服务费用并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中的无限循环问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,无限循环

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“解决vue中的无限循环问题”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

解决vue中的无限循环问题

Element Backtop回到顶部的具体使用

Element MessageBox弹框的具体使用

评论“解决vue中的无限循环问题”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接