问题描述
在引入vue的html页面中，html语句中调用methods中的方法修改data中的属性值，会导致页面陷入死循环。
问题原理
触发条件（二者需都满足）
1：methods中有修改data属性值的方法；
2：html文档里用模板式语法调用了methods：{}里的方法 ；
vue作为mvvm模板，data中的属性值每次修改，都会引起虚拟模板的修改，进而渲染到页面中（即html中），而html被重新渲染后（可以简单理解为对相关的html代码重新执行），又会调用methods中的方法对data中属性值的修改，继而又重复上述过程，至此开始了死循环。
解决办法
1、在vue源码中，vue设定了一个最大更新次数：
var MAX_UPDATE_COUNT = 100;
当循环次数达到100次时终止循环。
2、在浏览器中会有请求时长设置，超出一定的时长后也会终止请求。
3、可以将data中相应的属性值赋给一个变量来操作。
实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="dv1">
<h1>{{msg}}</h1>
<h3>{{num()}}</h3>
<h3>{{num2}}</h3>
</div>
<script>
let vm = new Vue({
el:"#dv1",
data:{
count: 0,
msg: "this is vue!",
},
methods:{
num(){
// let a = this.count;
// a += 1;
// return a;
return ++this.count;
}
},
computed:{ //是计算属性，调用时不需要加（）
num2(){
this.count += 1;
return this.count;
}
},
});
</script>
</body>
</html>
标签：count,vue,methods,html,data,属性 From： https://www.cnblogs.com/zhp2240872620/p/16734351.html小tips：类似的行为在computed：{}里将不会引起死循环（函数重复调用）。