解决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 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Angular通过指令动态添加组件问题
Jul 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
js运动事件函数详解
2016/10/21 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python @property装饰器原理解析
2020/01/22 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
服务生自我鉴定
2014/01/22 职场文书
迟到检讨书大全
2014/01/25 职场文书
毕业自我鉴定书
2014/03/24 职场文书
城管个人总结
2015/02/28 职场文书
老人节主持词
2015/07/04 职场文书