vm.$nextTick的作用

413 阅读2分钟

很多人都会说到可以处理异步,而具体为什么要用nextTick,他解决了什么问题,不用他会怎么样的时候,就很多人说不上来。

具体说明

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。(官网解释) 解决的问题:有些时候在改变数据后立即要对dom进行操作,此时获取到的dom仍是获取到的是数据刷新前的dom,无法满足需要,这个时候就用到了$nextTick。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

举例说明

例如:如果Vue组件中含有子组件时,在该实例的生命周期mounted钩子函数中,不会承诺所有的子组件也都一起被挂载,但有时我们却希望整个视图都渲染完成后在执行一些操作,所以可以用 vm.$nextTick 替换掉

mounted:
mounted: function () {
  this.$nextTick(function () {
      // do something after view render completed...
  })
}

当我们修改实例中data数据或触发更改数据的事件,到更新视图完毕,这一过程的DOM更新是异步的。只要Vue观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。

如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。所以在同一事件循环中对统一数据做多次修改,结果也只会渲染最后从修改的那一次。

例如,当你设置 vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。为了在数据变化之后等待 Vue 完成更新 DOM 后再做点什么,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。