关于vue中next和Tick(nextTick)的分析

这篇文章主要介绍了关于vue中next和Tick(nextTick)的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前言

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

推荐手册：Vue.js基础教程

什么时候开始本次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之前执行的，可以看下面的代码
假设html中有这行代码<p ref="msg">{{msg}}</p>
我们在mounted里面执行

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

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

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

相关文章推荐：       
1.在Vue中有关nextTick方法的详细介绍      
2.在Vuejs中通过nextTick()实现异步更新队列          
相关视频推荐：         
1.JavaScript极速入门_玉女心经系列

总结

1.nextTick里面的回调是在本轮tick循环中执行的
2.所有的微任务会在本轮tick中全部执行完
3.任何一个宏任务也就是tasks都不在一个tick中执行，而是在不同的tick

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用Vue+Mock.js来搭建前端的独立开发环境

vue内置组件transition的详解（图文）

Atas ialah kandungan terperinci 关于vue中next和Tick(nextTick)的分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!