关于vue中next和Tick(nextTick)的一点理解

前言

在这之前我是没有怎么看过vue源码的，但是看了源码后又产生了一些疑问，如果不看源码我还真没有任何疑问的去用nextTick，因为我只知道我想获取更新后的dom我就在里面写回调，只管写准没错，有天好奇调试了下代码就发现了一些疑问....

什么时候开始本次Tick?

百度搜索event loops可以看到很多文章，但是看了很多文章都没让我知道或者作者没有去说明什么时候开始第一次tick,不过也幸运，还是有人skycity明确说出了，印象中之前掘金有篇文章我在评论里面也得到过答案，答案就是从全局script开始执行开始第一轮tick

什么时候结束本次Tick?

这个也是我根据搜索资料得出结论，当GUI 渲染完后本轮Tick结束，但是在开始渲染之前js 引擎会执行完所有的微任务队列，新的叫法是jobs,宏任务叫tasks

一次tick结束之后干嘛？

继续查找事件任务队列中是否有tasks，如果没有就静静等待非空，如果有就继续开始第二轮tick，取出tasks执行 我画了个图可以表示下这个过程

这个结论是我目前觉得正确的，希望有觉得不对的地方可以评论讨论下。

为什么叫next**?

按照官网的解释

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

我个人是并不理解这个下次dom更新循环是指的什么?是跟event loop这个事件循环一个意思吗？本次dom更新循环是什么时候开始?什么时候结束？希望有人知道的解释下。我觉得执行回调的时机是在下个tick之前执行的，

2018.7.21更新：根绝 SHERlocked93 大佬的文章参考以及他的回答，nextTick的回调执行时机其实是不确定的，看下面这个图：

根据上面的图可以看到最终回调有可能放入两个队列，那被执行的时机就有一下可能：

1：放入微任务队列,则在本轮tick执行

2：放入宏任务队列，则在下轮tick或者下下轮，或者下n轮 第二种为什么不确定呢？因为不知道放入队列时前面有几个任务在排队，可能以后n个计时器，而宏任务不像微任务一次全部执行完，宏任务是一个tick只执行一个任务，每个任务都在不同的tick,所以时机不定，但是肯定是在本轮tick之后

下面的代码我只走了支持Promsie的浏览器的过程，此时是在本轮tick执行 假设html中有这行代码 <div ref="msg">{{msg}}</div> 我们在mounted里面执行

this.msg = 'hello';
this.$nextTick(()=>{
    console.log(this.$refs.msg.innerHTML)
})
复制代码

上述代码在vue里面的大致如下执行流程如下

通过上面的流程分析，nextTick里面的回调是在当前时间循环内执行的，并没有在下个事件循环执行。so,在下个事件循环执行时dom确实是最新的了，但是回调并没有在下个事件循环执行。

总结

1.nextTick里面的回调是在本轮tick循环中执行的 nextTick里面的回调是在本轮tick或者下n轮tick中执行的(n=1,2,3...)

2.所有的微任务会在本轮tick中全部执行完

3.任何一个宏任务也就是tasks都不在一个tick中执行，而是在不同的tick

4.强烈推荐大家去看下这两篇文章，写的很详细 :

Vue源码阅读 - 批量异步更新与nextTick原理

2018.7.26更新：补一篇文章，5星推荐这个

Vue源码详解之nextTick：MutationObserver只是浮云，microtask才是核心！

参考链接：

理解javascript中的事件循环(EventLoop)

Javascript事件循环机制以及渲染引擎何时渲染UI

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理