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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
jquery使用经验小结
May 20 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解js常用分割取字符串的方法
May 15 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
谈谈PHP语法(2)
2006/10/09 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
package.json配置文件构成详解
2019/08/27 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
基于树莓派的语音对话机器人
2019/06/17 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
招商引资工作汇报
2014/10/28 职场文书
上课说话检讨书
2015/01/27 职场文书
五四青年节活动总结
2015/02/10 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Node.js实现断点续传
2021/06/23 Javascript