vue.nextTick(Vue.$nextTick实现原理以及使用异步更新的原因)

过去的介绍回顾
Vue3源代码分析——实现组件通信提供，injectvue3源代码分析3354实现createRenderer，runtime-testvue3源代码分析3354实现元素属性更新，子更新vue3源代码分析3354手写diff算法5。vue3源代码分析3354实现组件更新。
vue如何更新UI，是同步还是异步？本期我们将实现vue3和nextTick api的异步更新UI。请检查仓库的所有代码。
假设文本是同步的。如果vue3同步更新UI界面会怎么样？请想一想下面的例子：
测试(‘有问题，vue异步更新ui界面’，()={ let clickMethodconst App=create App({ name : ‘ App ‘，setup(){ const count=ref(0)click method=()={ for(让I=0；i 100i ) { count.value } } return { count，} }，render() { return h(‘p ‘，{}，this . count)})const appDoc=document . query selector(‘ # app ‘)app . mount(appDoc)expect(appDoc。innerHTML)。将(‘ 0
)click method()expect(appdoc . innerhtml)。tobe (‘100p’)})在上面的测试用例中，外部抛出了一个方法。方法中有一个循环，响应数据计数改变了100次。这个测试用例本身可以通过，但是当你打调试器的时候，你会发现更新过程走了100遍，dom操作也走了100遍。这个结果肯定不尽如人意。更新100次没有问题，但是dom操作了100次，肯定有点浪费性能。
立正！
看到这里的同志，可以思考一下如何优化。
上面已经提到了优化性能。dom浪费性能的100次更新。下面是解决的方法。在求解之前，我们需要了解一个概念，js事件循环。
js事件循环是一个经典的在线图，这意味着所有的js任务都可以区分同步任务和异步任务。同步任务直接放在主进程中直接执行调用，而异步任务需要等到所有同步任务完成后，才逐个执行异步任务。但是，异步任务也可以分为宏任务和微任务，两者都有独立的任务队列。
宏观任务主要包括：