vue 中如何在更改数据后拿到最新数据的方法（nextTick），解决vue异步更新获取数据问题（新手容易踩坑）

最新推荐文章于 2024-09-05 20:36:59 发布

飘走的落不离

最新推荐文章于 2024-09-05 20:36:59 发布

阅读量3.3k

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/gebieren/article/details/106483661

版权

本文介绍了在Vue开发中遇到更改数据后无法立即获取最新数据的问题，通过实例展示了初始代码结构和问题所在。文章详细讲解了两种解决方案：一种是不推荐的setTimeout方法，另一种是Vue官方推荐的$nextTick方法，用于在DOM更新后执行回调，确保能获取到最新的数据。

摘要由CSDN通过智能技术生成

初始代码结构展示：

<div id="app">
			<button @click="edit">更改数据</button>
			<br />
			<hr />
			<div class="init">
				{
  {msg}}
			</div>
		</div>
		<script src="vue.js"></script>
		<script>
			const vm = new Vue({
				el: "#app",
				data: {
					msg: "vue原始数据",
				},
				methods: {
					edit() {
						console.log(document.querySelector(".init").innerText);
						this.msg = "vue更改后的数据";
						console.log(document.querySelector(".init").innerText);
					},
				},
			});
		</script>

通过打印结果发现两次打印是一样的：