最近学习vue的过程中遇到了nexttick(),在官方文档上没理解就查阅了一些资料,下面是我对vue.$nextTick()的一些理解。
引用知乎上的例子:
//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以,nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
要理解上面的首先要理解vue的响应式dom渲染,官方文档上是这样解释的:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
这就涉及到了一些异步执行,想更多理解异步请移步阮一峰大神,
vue渲染是先执行主线程的任务,主线程的任务执行完后执行任务队列中的函数即回调函数,vm.meassage在主线程上 修改后的数据会放在任务队列上,没涉及到dom的更新 ,当同步任务执行完毕后会执行回调函数把数据传递回来,然后在进行dom树更新,
vue.nextTtick()的作用就是在dom树更新后执行 也就是在修改数据之后立即使用这个方法,获取更新后的 DOM。