$nextTick简单理解

nextTick()的作用:

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

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

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

$nextTick简单理解_第1张图片

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

$nextTick简单理解_第2张图片

 

为什么会需要用到$nextTick

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

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

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

你可能感兴趣的:(vue.js,javascript,前端)