nextTick()方法的使用

定义

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