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 Archive Network 集合
May 12 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
图文详解vue框架安装步骤
Feb 12 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_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
jquery简单体验
2007/01/10 Javascript
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python科学画图代码分享
2017/11/29 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python正则表达式实例代码
2020/03/03 Python
使用Python构造hive insert语句说明
2020/06/06 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
政协调研汇报材料
2014/08/15 职场文书
领导视察通讯稿
2015/07/18 职场文书
青年教师听课心得体会
2016/01/15 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers