vue.nexttick原理,vue的nextTick这个方法有什么用
本文主要介绍vue nextTick的原理分析，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
事件循环
MiscroTask(微任务)UI渲染(强调)总结下一个周期nextTick
摘要
用过Vue的朋友都知道，Vue中的nextTick可以获得更新后的DOM。今天我来解释一下nextTick做了什么。
在开始之前，我们需要知道一个概念，就是事件循环。
Event Loop
事件循环被翻译成事件循环。一个事件循环将包括一个或多个任务队列，连续线程将取出最早进入队列执行的任务。取出的任务称为宏任务，每个宏任务都有一个任务源。处理完每个宏任务后，最早进入队列的下一个宏任务将从队列中取出重新执行。
任务源：
```
1.脚本
2.事件
3.Dom交互
4.输入输出
5.用户界面渲染
6.定时器
7.设置间隔
8.requestAnimationFrame
.
```
也就是说，当遇到上述情况时，会生成一个宏任务，并推送到队列中。
miscroTask(微任务)
在执行完每个宏任务后，主线程会检查宏任务下的微任务是否为空。如果不是空的，就按时间顺序从早到晚拿出来。如果途中遇到新的微任务，它将继续将该微任务推入微任务队列。
UI Render(重点)
随着miscroTask队列的清空，主线程会执行UI渲染，也就是渲染界面，但是浏览器不会每次都在UI渲染任务下渲染界面。视情况而定，现在主流的浏览器一般都是按照60HZ的刷新频率来渲染界面，也就是16.7ms(不准确估计)，一个宏任务通常不到16.7ms，所以浏览器每次都会根据情况来渲染。
总结下一个循环
1.从宏任务队列中取出最早添加的一个。
2.开始执行任务，如果途中遇到新的宏任务，它将被添加到宏任务队列的后面。
3.在执行宏任务之后，事件循环将寻找微任务队列。
4.同理，如果途中遇到新的微任务，就把它放在宏任务下微任务队列的后面。
5.执行微任务后，将执行UI渲染宏任务。
6.浏览器会根据现有情况决定是否更新DOM，通常频率为60HZ。
7.至此，事件循环结束。
nextTick
我们开始分析nextTick。
根据上图
我们看到了几种写nextTick的方法：
1.这个。$nextTick(cb)
2.这个。$nextTick()。然后(cb)
所有cb都将被放入回调数组，等待一次性调用。
在上图中，我们看到回调主要是由timerFunc函数调用的，所以我们把重点放在这个函数上，先看一下源代码。
我们可以在不同的情况下看到timerFunc不同的赋值情况。
首先，它将确定浏览器是否支持Promise属性。如果是，timerFunc将被分配承诺。这里有个小问题。在ios下，虽然有一个Pormise对象，并且它会被推入到微任务队列中，但是队列不会被更新。这时候就需要添加一个宏任务来强制刷新微任务队列。
变异观察者，相信很多人都不知道这个Api。是一个可以监控DOM变化的API，属于microTask，优先级比Promise低。创建新的文本节点后，手动更改其文本节点以触发微任务。
这里会有一个小问题：
这个文本节点渲染成功后，就一定能代表其他DOM渲染成功吗？
这是一个替代，主要是因为它是一个微任务，所以我们用它，而不是因为它监控DOM。
所有微任务失败后，选择setImmediate，这是一个只有高级IE和Edge浏览器才有的API。主要在计算大量数据时使用。
最后，设置超时
看到这里，你会有疑惑吗？
上面的代码没有说监听DOM更新后执行nextTick？什么？当时我的脑袋是duang的。
那么接下来的才是最重要的。
DOM树的更新是实时的，DOM树的更新是实时的，重要的事情说三遍，就是说你不需要监控DOM的更新，可以得到DOM运行的实时反馈。最后一行代码操作DOM，下一行就能得到。
那么有人会疑惑，nextTick到底是做什么的？
nextTick的作用是将收集到的Watcher逐个从队列中取出，一次性改变数据来渲染DOM。我们知道运营DOM的成本很高。当浏览器打开一个网页时，会启动一个进程，这个进程是由线程组成的。
1.GUI渲染线程
2.js引擎线程(主线程)
3.EventLoop旋转处理线程
4.其他线程，如网络
跨线程操作开销大，一次渲染Dom可以有效优化性能！
总结
NextTick不用于监控DOM的变化，因为DOM的变化可以实时获得。它的功能是一次性改变数据和渲染DOM。
以上是Vue nextTick原理分析的详细内容。更多关于Vue nextTick原理的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。