在 Vue 官方文档中,nextTick 是这么说明的:

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。

原理

1.异步执行

Vue实现响应式并不是数据发生变化之后 DOM 就立即变化,而是按照一定策略进行 DOM 的更新。其实在Vue的文档中,不难发现Vue是异步执行 DOM 更新。

异步执行的机制简单来说就是:

  • 1、首先所有的同步任何肯定是在主线程上执行的,即执行栈;
  • 2、除了主线程,还一个任务队列task queue,只要异步任务有了运行结果,那任务队列中就会放置与之对应的一个事件。
  • 3、等执行栈中,所有的同步任务执行完毕,系统就会读取任务队列中的事件,那么,事件对应的异步任务结束等待,进行执行栈,开始执行。
  • 4、主线程不断重复上面的第三步。

Vue 在修改数据之后,视图不会立即更新,而是等待同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

2.事件循环说明

Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

上面说异步执行的机制中,主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。Event Loop (事件循环)分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick并在两个tick之间进行UI渲染

由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,而是会监听数据变化,并缓存在同一事件循环中,等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。

此时通过 Vue.nextTick 获取到改变后的 DOM 。同样,通过 setTimeout(fn, 0) 也可以获取到。

应用场景

1、主要场景:

需要在视图更新之后,基于新的视图进行操作。

 注意:在 created 和 mounted 阶段,如果需要操作渲染后的视图,也要使用 nextTick 方法。

2、其他场景应用

① 点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点。

② 点击获取元素宽度。

③ 使用 swiper 插件通过 ajax 请求图片后的滑动问题。

Logo

前往低代码交流专区

更多推荐