由$nextTick() 理解js异步宏任务和微任务

在vue框架开发中，我们经常会用到nextTick()方法，官方的解释是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，那么在哪些实际场景中去使用呢，它的原理是什么呢？我们接着往下看

nextTick()方法主要是用在数据改变，dom改变应用场景中。我们知道js是单线程，异步任务会放到事件队列中，等待同步任务执行完毕之后再执行。由于vue中数据和dom渲染是异步的，所以，要让dom结构随数据改变这样的操作都应该放进nextTick()的回调函数中。在created()中使用时，dom还没有渲染，此时就可以使用nextTick()，但是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

但是假如和我们经常用到的setTimeout()一起使用，结果顺序会是怎样的呢，如果还有Promise呢？

setTimeout(() => {
    //执行后 回调一个事件
    console.log('事件1')
}, 0)
console.log('事件2');
this.$nextTick(function() {
    console.log('事件3');
})
new Promise((resolve) => {
    console.log('事件4');
    resolve()
}).then(() => {
    console.log('事件5');
})

执行顺序为：

分析：
setTimeout异步事件，放入异步任务队列；
事件2所在行是主线程，直接执行；
事件3所在行也异步事件，放入异步任务队列；
创建promise的new Promise是主线程，直接执行；
Promise中的then方法为异步函数，放入异步任务队列；
可能小伙伴就会疑惑了，那顺序不应该是2 4 1 3 5 吗？其实不然，异步事件也是分执行顺序的！
宏任务（macrotask ）和微任务（microtask ）表示异步任务的两种分类，同一个队列中先执行微任务，再执行宏任务。
宏任务包括

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
  微任务包括：
• process.nextTick
• MutationObserver
• Promise.then catch finally

所以在上面的例子中，3,5是属于微任务，优先于1执行。

以上就是js 执行机制了，只要理解js 的执行机制，那么童鞋们在开发的过程中就不会出现写的，想的和执行的不一致的情况了！

参考链接：js 宏任务和微任务

谁能仅靠十年寒窗苦读，去经营百岁人生?
活到老，学到老！
知识改变人生！
共勉！