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 相关文章推荐
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
详解React 条件渲染
Jul 08 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python的re模块正则表达式操作
2016/05/25 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python中断多重循环的思路总结
2019/10/04 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
饮料业务员岗位职责
2013/12/15 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
小学语文国培感言
2014/03/04 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
贺卡寄语大全
2014/04/11 职场文书
商标侵权律师函
2015/05/27 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python图片检索之以图搜图
2021/05/31 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript