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中清空数组的三种方法分享
Apr 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
javascript清空table表格的方法
May 14 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
layui 表单标签的校验方法
Sep 04 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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版(4)
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python映射列表实例分析
2015/01/26 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python self用法详解
2020/11/28 Python
小学教师的个人自我鉴定
2013/10/26 职场文书
学院书画协会部门职责
2013/11/28 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
六五普法规划实施方案
2014/03/21 职场文书
商铺消防安全责任书
2014/07/29 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏