报错解析 [Vue warn]: You may have an infinite update loop in a component render function.

结构

vue操作一个很有意思的报错

[Vue warn]: You may have an infinite update loop in a component render function. 
1

代码：

<template>
       <span class="show-filters" ：class="show = !show">
                {{ show ? '隐藏过滤器 ↑' :'显示过滤器 ↓' }}
     </span>
</template>
 <script>       
	export default {
  		data() {
    		return {
      			show: true
   			 }
   		}
  	};
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

分析

问题的本质

NOTE: render method is triggered whenever any state changes

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

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

v-for

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

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>
1
2
3

vue部分

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,
        };
    },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 也会出现如题报错，其原因是在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,
        };
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

小结

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