解决vue中的无限循环问题


Posted in Javascript onJuly 27, 2020

项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用。我直接写了一个方法来计算出每个商家和总的服务费用并return出来。如果不看控制台的话运行是没问题的。但是控制台报了无限循环的错误。

解决vue中的无限循环问题

下面是错误代码

html:

解决vue中的无限循环问题

js:

解决vue中的无限循环问题

这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据。所以尽量不要直接在绑定的数据上使用方法来绑定。找到问题后下面就是解决办法。

因为选中商品后就要重新计算价格。所以我将选中的商品添加到data里面

解决vue中的无限循环问题

然后通过侦听器监听totalBox的变化

解决vue中的无限循环问题

当totalBox变化后在执行计算方法。这样就避免一直来回计算的问题

解决vue中的无限循环问题

补充知识: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中的无限循环问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
express 项目分层实践详解
Dec 10 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
You might like
php zend 相对路径问题
2009/01/12 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
webpack多页面开发实践
2017/12/18 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
js回调函数仿360开机
2019/12/26 Javascript
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python 循环数据赋值实例
2019/12/02 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
深入了解NumPy 高级索引
2020/07/24 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
小学三年级学生评语
2014/04/22 职场文书
法人代表证明书格式
2014/10/01 职场文书
学前教育见习总结
2015/06/23 职场文书
论语读书笔记
2015/06/26 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
销售人员管理制度
2015/08/06 职场文书