$nextTick简单理解

nextTick()的作用：

nextTick()是将回调函数延迟在下一次dom更新数据后调用，就是当数据更新了，在dom中更新渲染后，立即自动执行该函数。

就是数据更新-->dom更新需要一定的过程 在methods操作数据改变 需要执行beforeUpdate和updated两个钩子函数后  直到updated执行完才能获取最新dom ，那么nextTick()就是将里面的回调函数延迟到updated执行完调用。

首先是不加nextTick()的代码执行结果

 然后再看加了nextTick()的代码执行结果

 

为什么会需要用到$nextTick

因为vue中更新dom是异步的，vue在监测到数据改变时并不会立即更新视图，而是开启一个队列，把同一个事件循环中观察到数据变化的watcher推送进这个对列，同时缓冲所有数据变化并去重，在下一个事件循环中，才执行去重后的任务； 如果同一个watcher 被多次触发，只会被推送到队列中一次（去重）。

更详细的讲解可以看这个博主的

前端面试常问_$nextTick_前端小蜜疯的博客-CSDN博客