解决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随机展示头像代码
Dec 21 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
jQuery异步提交表单实例
May 30 jQuery
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 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批量删除数据
2007/01/18 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
js中return false(阻止)的用法
2013/08/14 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Django开发中复选框用法示例
2018/03/20 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Django 再谈一谈json序列化
2020/03/16 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
财务总监管理职责范文
2014/03/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
防汛工作情况汇报
2014/10/28 职场文书
总经理助理岗位职责
2015/01/31 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书