Vue中$nextTick的作用

Vue中的this.$nextTick的作用是产生一个回调函数，在下一轮dom更新后执行该回调函数。用处: 当某操作需要等数据被修改更新之后再操作，则可以将操作放在this.$nextTick的回调函数中执行。因为并不是vue数据一旦修改就会立即更新。示例: 在一个按钮的点击事件中修改vue中的数据message，我们用dom来获取修改之后的值。可以认为是在执行一个dom更新周期后，在

盛世如恋

3430人浏览 · 2022-03-20 11:31:51

盛世如恋 · 2022-03-20 11:31:51 发布

Vue中的this.$nextTick的作用是产生一个回调函数，在下一轮dom更新后执行该回调函数。
用处: 当某操作需要等数据被修改更新之后再操作，则可以将操作放在this.$nextTick的回调函数中执行。因为并不是vue数据一旦修改就会立即更新。
示例:
在一个按钮的点击事件中修改vue中的数据message，我们用dom来获取修改之后的值。可以认为是在执行一个dom更新周期后，在调用了this.$nextTick的回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="test()" value="点击" id="i" >
			<div id="m">{{message}}</div>
		</div>
		
		
		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					message:"Hello"
				},
				methods:{
					test(){
						this.message = "H"; 
						console.log("当前文本的值: "+document.getElementById('m').innerText);
						console.log("-------");
					}
				}
			})
			
		</script>
	</body>
</html>

我们的理想输出是当前文本的值:H ,但是输出是当前文本的值:Hello;是因为我们获取值的时候，还没更新message。
在这里插入图片描述

我们将获取id=m的值的代码放在this.$nextTick的回调函数中:


test(){
	this.message = "H"; 
	this.$nextTick(function(){
		console.log("当前文本的值: "+document.getElementById('m').innerText);

	});
	console.log("-------");
}

这个时候就可以获取到最新修改的值了
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^