首页 > 技术文章 > vue nextTick理解

fan-zha 2019-05-17 11:45 原文

在改变完data属性之后,视图并不会立即更新。此时同步 执行基于更新后的视图 的操作,会有问题。这时 nextTick 派上用场了。
它可以注册一个 视图更新之后的回调操作。
应用场景:需要在视图更新之后,基于新的视图进行操作。

和  setTimeout(fn, 0) 功效相同,只不过返回promise

来自 <https://segmentfault.com/a/1190000012861862>

例子:

点击按钮显示原本以 v-show = false 隐藏起来的输入框,并立即获取焦点。
showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //此时 输入框 dom 并未立即 渲染,获取不到输入框,自然也获取不到焦点
}
修改为:
showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

推荐阅读