nextTick存在的意义
Vue采用的【异步更新策略】,监听到数据发生变化时不会立即更新DOM, 而是开启一个任务队列,缓存在同一事件循环中发生的所有数据变更; 多次数据更新合并成一次,减少DOM操作的次数。
nextTick的定义
下次DOM更新循环结束之后,执行延迟回调。 异步方法,用于在DOM更新后执行回调
next Ti c k的实现思路与用法
当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个tick才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。
nextTick()可以在状态改变后立即使用,以等待DOM更新完成。 你可以传递一个回调函数作为参数,或者await返回的Promise。
使用nextTick的背景
渲染一个列表,每次点击按钮就会往列表后面添加十条数据,并跳到第十条数据的位置