Vue infinite update loop的问题解决


Posted in Javascript onApril 23, 2019

一个尤大大曾回复过的问题

vue warn : You may have an infinite update loop in a component render function

最近再写一个数组渲染时,源数据是拿到的数组经过排序后的数组,正常运行却出现爆红:

报红代码:

computed: {
 ...mapState({
  fromNames (state) {
  let fromNames = state.quote.fromNames;
  return fromNames.sort((a, b) => b.isBind - a.isBind);;
  },
 }),
 },

然后...

Vue infinite update loop的问题解决

然后百思不得解,最终找到源头:

Vue infinite update loop的问题解决

你的确导致了一个无限循环, 因为array.sort()改变了数组自身,导致了过滤器又一次被触发。确保在副本上对数组排序:
return value.slice().sort(...)

解决方案:

computed: {
 ...mapState({
  fromNames (state) {
  let fromNames = state.quote.fromNames;
  return fromNames.slice().sort((a, b) => b.isBind - a.isBind);
  },
 }),
 },

数组方法 array.slice()用法

arr.slice([begin[, end]])

slice() 方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。

begin 起始位置 如果未定义,就默认0;如果大于数组长度,返回空数组;如果是负数,则从末尾算起;

end 结束位置(不包含该位置元素)如果省略了,就默认到末尾;如果大于数组长度,就取数组长度;如果是负数,则从末尾算起。

技巧:处理类数组对象

slice() 可以用于把一个类数组对象转化为一个新数组

例如:

function list() {
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

也可以使用.call绑定在函数的Function.prototype(也可以被简化为[].slice.call(arguments)

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
 return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

或者

[].slice.call({ 0: 0, 1 : 2, 2: 4, length: 4 })
//[0, 2, 4, empty]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
深入了解JavaScript 私有化
May 30 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 #Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 #Javascript
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
js实现无缝滚动双图切换效果
2019/07/09 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
使用python实现rsa算法代码
2016/02/17 Python
Python字典简介以及用法详解
2016/11/15 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
django2.0扩展用户字段示例
2019/02/13 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
社会实践先进工作者事迹材料
2014/05/06 职场文书
自荐信格式范文
2015/03/04 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
python实现自动化群控的步骤
2021/04/11 Python