为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用 Vue.nextTick 在当前的回调函数中获取最新的DOM
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Max'
}
})
vm.msg = 'Maxuan';
console.log(vm.$el.textContent);//Max
Vue.nextTick(() => {
console.log(vm.$el.textContent);//Maxuan
})
</script>
</body>
在组件内使用 vm.$nextTick() 实例方法特别方便，因为不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 es6 async/await 语法完成相同的事情
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
