定义

在下次 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()的回调函数中
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐