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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vuex如何重置所有state(可定制)
2019/01/17 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
详解Python编程中time模块的使用
2015/11/20 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
安全生产检讨书
2014/01/21 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
六年级学生评语
2014/04/22 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
教育见习报告范文
2014/11/03 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
纪检监察立案决定书
2015/06/24 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
mysql幻读详解实例以及解决办法
2022/06/16 MySQL