nextTick 的基本作用:异步任务,批量更新;
首先当依赖数据改变vue不会马上调用patch方法去更新虚拟 dom 在更新视图.而是采用了批量异步;
批量:是指 vue 会把多次的更新操作汇总一次进行更新;
异步指的是nextTIck;
解释清楚 nextTick 的作用首先得了解 js 的事件执行机制,js 事件执行首先得分为同步和异步;
执行的任务又分为宏任务和微任务,js 代码从上到下依次执行,先同后异,先宏后微;
js 代码和计时器等都属于宏任务,像 promise 和 process 都属于微任务,
每执行一个宏任务都会产生很多异步和微任务,这些代码都会在同步任务完成之后去执行,微任务还在异步任务之后;
$nextTick 原理其实是采用的 process 对象的 nextTick 方法,就是执行栈中的微任务,
在执行$nextTick 中代码时,基本代码都已经执行完成,使用$nextTick 其实也就是防止在执行某段代码的时候,所需要的参数或者 dom 没执行到或者没渲染完成,
简单的说,因为 vue 是异步更新的,$nextTick 用来知道什么时候 DOM 更新完成。
当修改了 data 的值然后马上获取这个 dom 元素的值,是不能获取到更新后的值, 你需要使用$nextTick 这个回调,让修改后的 data 值渲染更新到 dom 元素之后在获取,才能成功。