关于vue中next和Tick(nextTick)的分析
关于vue中next和Tick(nextTick)的分析
内容导读
收集整理的这篇技术教程文章主要介绍了关于vue中next和Tick(nextTick)的分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2049字，纯文字阅读大概需要3分钟。
内容图文
这篇文章主要介绍了关于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之前执行的，可以看下面的代码
假设html中有这行代码<p ref="msg">{{msg}}</p>
我们在mounted里面执行
this.msg = 'hello';this.$nextTick(()=>{
console.log(this.$refs.msg.innerHTML)})
上述代码在vue里面的大致如下执行流程如下
通过上面的流程分析，nextTick里面的回调是在当前时间循环内执行的，并没有在下个事件循环执行。so,在下个事件循环执行时dom确实是最新的了，但是回调并没有在下个事件循环执行。
总结
1.nextTick里面的回调是在本轮tick循环中执行的
2.所有的微任务会在本轮tick中全部执行完
3.任何一个宏任务也就是tasks都不在一个tick中执行，而是在不同的tick
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何使用Vue+Mock.js来搭建前端的独立开发环境
vue内置组件transition的详解（图文）
以上就是关于vue中next和Tick(nextTick)的分析的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是为您收集整理的关于vue中next和Tick(nextTick)的分析全部内容，希望文章能够帮你解决关于vue中next和Tick(nextTick)的分析所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
