vue nextTick理解
在改变完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()
})
}