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

初始代码结构展示：

[code]<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>

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

解决方式有两种：

第一种是通过setTimeout(延时器）--》判断延时的时间是个问题，不建议采用；

第二种是Vue官网提供的方式。Vue.nextTick()或者this.$nextTick():