nextTick()方法的使用
定义在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM,就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;可以理解为:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,用法将回调延迟到下次 DOM
·
定义
在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM,就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;
可以理解为:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
用法
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。全局方法 Vue.nextTick
和this.$nextTick()是一样的,不同的是回调的 this
自动绑定到调用它的实例上。
methods:{
testClick() {
this.content = '改变了的值'
this.$nextTick(() => {
// dom元素更新后执行,因此这里能正确打印更改之后的值
console.log(this.$refs.tar.innerText) // 改变了的值
})
}
}
使用的情况
- created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
- 对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中
更多推荐
已为社区贡献1条内容
所有评论(0)