Vue循环问题-[Vue warn]: You may have an infinite update loop in a component render function-解决-在线案例

[Vue warn]: You may have an infinite update loop in a component render function.在组件呈现函数中可能有一个无限更新循环

在循环过程中，修改到了循环对象，从而引发了无限循环，此时vue会发出警告，但并没有真正产生死循环。

你的确导致了一个无限循环， 因为array.sort()改变了数组自身，导致了过滤器又一次被触发。确保在副本上对数组排序：
return value.slice().sort(...)

分析-案例

在线案例-案例01-案例02-案例03--具体内容在控制台中查看

官网案例：Class 与 Style 绑定

即任何时候vue实例状态的改变都会触发渲染方法的执行

1 组件初始化时，将数据属性show值为true
2 当渲染方法执行，内联表达式show = !show改变了状态
3 响应状态show改变，重新执行render方法，企图生成新的VNode节点（以便生成真实节点插入页面）
4 于是产生的局面会无尽循环这样：render - show改变 - render 重复执行步骤2-3-2

v-for

类似同样的报错，还很有可能在v-for指令中产生

// :class="item.select_num > item.total_num ? 'red' : '' "
{{item.id}}

data() {return {accept: false,not_accept: false,};
},
methods: {test(result) {if (result == 'accept') {this.accept = true;this.not_accept = false;} else if (result == 'Not accept') {this.accept = false;this.not_accept = true;} else {console.log(result);}return {success: this.accept,danger: this.not_accept,};},
},

也会出现如题报错，其原因是在for循环中 （render - test - render ）间接修改了data响应数据而且没有终止条件。但是记住状态的改变会导致渲染方法的执行，上述两种情况的相同点在于，执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，不休了。

解决

对同一依赖响应数据属性在同一实例的生命周期内只作一次变更。
比如：对示例一，将属性绑定改为vue事件绑定，事件是在下一次tick执行渲染
对于示例二，for指令通常只用来读取数据，而非写入响应数据。如需写入数据，无论直接还是间接操作都不要改变响应数据

methods: {test(result) {let accept;if (result == 'accept') {accept = true;} else if (result == 'Not accept') {accept = false;} else {console.log(result);}return {success: accept,danger: !accept,};},
}

• 慎用内联表达式，对于自定义vue属性而言，它会被渲染器自执行，上述两个小错误同样报错便如此
• 尽可能用事件改变状态 ，驱动页面渲染重绘

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！