Vue 中 nextTick 原理和应用场景

原理
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 方法。