vue.nexttick一些思考

js同步异步任务&宏任务微任务

js分为同步任务和异步任务

同步任务在主线程执行，形成一个执行栈
异步任务则放在队列中执行，分为宏任务及微任务
宏任务包含setinterval、settimeout等
微任务包含promise.then（then方法后的内容）、Object.observe、MutationObserver、process.nextTick(Node.js 环境)

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：
执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

大致理解为：首先执行栈中任务即主线程代码；然后执行宏任务队列中代码；接着执行微任务队列中代码；然后渲染dom；紧接着下一个宏任务队列执行。。。
宏任务队列执行前需要等待dom的渲染，微任务队列执行则不需要等待dom渲染

vue.nexttick

以上逻辑有了一些概念之后，尝试着理解vue中的nexttick的使用原理
为了节省频繁dom渲染带来的开销，vue中的dom渲染是异步进行的，即不会每次改变data值后都进行dom渲染，而是先将其放入一个异步队列中
感觉可以将dom渲染理解成每个宏任务执行过后必须检查的一个过程，放在一个异步队列，有则渲染，没有则下一个宏任务（可能有问题，欢迎批评指正）

vue中事件循环：

1. 首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
   Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。
2. 同步任务执行完毕，开始执行异步 watcher 队列的任务，更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
3. 下次 DOM 更新循环结束之后
   此时通过 Vue.nextTick 获取到改变后的 DOM 。通过 setTimeout(fn, 0) 也可以同样获取到。

nexttick则是将回调函数作为一个宏任务，放入一个异步队列中，等待前面的dom渲染完之后进行执行

nexttick常用场景

data改变后需要获取dom元素的值，此时立马取会获取不到，则需要使用nexttick获取此前dom渲染之后的值。
需要注意的是，在created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。