$nextTick的原理和使用

$nextTick 的原理是利用 Vue 在下次 DOM 更新循环结束之后执行延迟回调。它的用途有:

  1. 在组件更新后获取DOM信息
    由于Vue是异步执行DOM更新的,如果需要立即获取更新后的DOM信息,需要在$nextTick后执行:
js
this.$nextTick(() => {
  // 访问更新后的 DOM 
})
  1. 在状态改变之后等待DOM更新
    当某些操作需要在DOM更新完成后再进行,要使用$nextTick:
js 
this.message = 'changed'
this.$nextTick(() => {
  // DOM 已更新  
})
  1. 批量更改数据后等待DOM更新
    如果对数据的多次更改会引起多次的重渲染,可以在改完数据后使用$nextTick批量渲染:
js
dataChanged() {
  this.message = 'changed'
  this.count++ 
  this.$nextTick(() => {
    // DOM updated
  }) 
}

所以简单来说,$nextTick 会在 DOM 更新后触发回调,以等待 DOM 更新完成。它很有用适合在需要操作更新后的DOM时使用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容