前言
官方文档是这样解释的：Vue 在更新 DOM 时是异步执行的，为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
- 演示代码
<body>
<div id="app">
<p id="content">{{msg}}</p>
<button @click='changeContent'>改变内容</button>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'正常内容'
},
methods:{
changeContent:function(){
this.msg ='改变后的内容';
let p = document.getElementById('content').innerHTML;
console.log(p)
this.$nextTick(function () {
let changeP = document.getElementById("content").innerHTML;
console.log("nextTick里面的内容", changeP);
})
}
}
})
</script>
- 效果：
1.点击前
2.点击后：
