Vue 中 nextTick 原理和应用场景

在 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 请求图片后的滑动问题。