Vue.nextTick
Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,API 文档中官方示例如下:

new Vue({
// ...
methods: {

// ...
example: function () {
  // modify data
  this.message = 'changed'
  // DOM is not updated yet
  this.$nextTick(function () {
    // DOM is now updated
    // `this` is bound to the current instance
    this.doSomethingElse()
  })
}

}

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

通过案例理解

<div class="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">

Change the Message

</button>
</div>

new Vue({
el: '.app',
data: {

msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''

},
methods: {

changeMsg() {
  this.msg = "Hello world."
  this.msg1 = this.$refs.msgDiv.innerHTML
  this.$nextTick(() => {
    this.msg2 = this.$refs.msgDiv.innerHTML
  })
  this.msg3 = this.$refs.msgDiv.innerHTML
}

}
})

作者:谢大见
链接:https://www.jianshu.com/p/34fa655532f7
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。