Vue nextTick用法
VUE nextTick用法
在vue中,观察到数据改变后,会开启一个队列。Vue会把同一个事件循环当中观察到的数据变化的 watcher
推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。在下一个事件循环时,Vue会清空队列并进行必要的DOM更新。
DOM是异步更新的,所以当你需要改变数据后对DOM进行操作,或者在created
生命周期对DOM进行操作,是需要等到DOM更新完成后再操作的。此时就可以哟个 nextTick
方法解决问题。
使用情景
-
在
created
生命周期对DOM操作: -
当修改数据完成时,想基于最新DOM进行操作:
例如:
打开编辑模态框之前,先查询详情渲染更新到表单,等表单更新完毕需要立即设置表单验证。
ajax 获取数渲染到DOM中展示出来后对DOM进行操作。(也可在
mounted
直接可以操作DOM,因为created
周期 DOM还未挂载,mounted
周期时DOM挂载渲染完成)
全局 nextTick
Vue.nextTick([callback, context])
参数:
{Function}[callback]:回调函数
{Object}[context]:
用法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
vm.$nextTick
vm.$nextTick([callback])
参数:
{Function}[callback]: 回调函数
用法:
将回调延迟到下次DOM更新循环之后执行。
在修改数据之后立即使用,然后等待DOM更新,更新完毕后会调用回调函数。
若没有提供回调函数且在支持 Promise 的环境中,会返回一个 Promise对象
new Vue({
// ...
methods: {
//...
test(){
// 修改数据
this.msg = 'new value' + new Date().getTime()
// DOM 还未更新
this.$nextTick(function(){
// DOM 更新完成
// `this` 绑定到当前实例
this.doSomethingElse()
})
},
test2(){
// 修改数据
this.msg = 'new value' + new Date().getTime()
// DOM 还未更新
this.$nextTick().then(function(){
// DOM 更新完成
// `this` 绑定到当前实例
this.doSomethingElse()
})
},
// this.$nextTick() 返回 Promise 对象,
// 就可以用 es2017 的语法 async/await 实现相同的功能
async test3(){
// 修改数据
this.msg = 'new value' + new Date().getTime()
// DOM 还未更新
await this.$nextTick()
// 已更新
this.doSomethingElse()
}
}
})