vue中，html中调用methods中的方法修改data中的属性值会引起死循环

薛定谔的小笼包

已于 2022-09-27 11:44:58 修改

阅读量1k

点赞数

文章标签： vue.js html 前端

于 2022-09-27 11:42:39 首次发布

本文链接：https://blog.csdn.net/qq_44997319/article/details/127067910

版权

问题描述

在引入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次时终止循环。 vue源码中对于循环次数的约定

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>