关于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
参考链接:
理解javascript中的事件循环(EventLoop)
Javascript事件循环机制以及渲染引擎何时渲染UI
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
关于vue中next和Tick(nextTick)的一点理解相关推荐
- vue中数据异步更新($nextTick)的问题
在vue中数据向视图上进行更新的操作,是异步的 异步的就意味着,在代码中更改完数据之后,直接去访问页面中的元素中的内容,还是老数据 那么如何去解决这个问题呢? vue中提供了$nextTick方法: ...
- vue中的组件导航守卫,个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面 新增模块按钮 和 编 ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
- “约见”面试官系列之常见面试题第二十八篇之vue中的混合(minix)实例理解
minix 是个什么东西, 就是混合,把你混合给我 浅显表述就是 你说 : '我叫李四', 我说 : '我叫张三', 然后把你 混合给我, 就成了 我说 : '我叫张三我叫李四', 所有解说都在例子里 ...
- vue中响应式是什么?怎么理解响应式原理?
vue中响应式是什么? 概念: 官网解释:Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新. 简而言之就是数据变页 ...
- 关于Vue中路由配置和router-link的一点补充
前置知识: 1.Vue组件.单页面组件 2.目录结构关联性知识 简介: 将组件和路径映射起来.主要用于单页面组件应用,即:创建了多个单页面组件,可通过vue router来进行类似页面的跳转.因为单页 ...
- Vue 中 强制组件重新渲染的正确方法
作者:Michael Thiessen 译者:前端小智 来源:hackernoon 有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当 ...
- Vue中动画的实现 从基本动画,到炫酷动画。看这一篇就够了
文章目录 Vue中的基本动画实现 动画类名的重定义 使用第三方的动画库 我就选择其中一个库做示范其他都一样 Vue中的基本动画实现 直接一点,基本动画的步骤 在需要加动画的地方,加入transitio ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
最新文章
- 大意!6行代码,“报废”5片单片机!
- 卷积神经网络的一些规则
- linux npm安装_怎样在Linux上开发vue项目
- 知识图谱有哪些方向是可以深入研究的?
- 【若依(ruoyi)】按钮怎么挨到一起了?
- Java三行代码搞定MD5加密
- 一文超详细讲解文本风格迁移
- linux登录用户who,Linux用户登录查看命令总结 - w,who,last,lastlog
- 教你与客户成交的24种技巧
- 清华 计算机 学神 李凌,清华大学计算机科学与技术系 2018 年接收推荐免试.PDF...
- dos 命令检索文件
- Mybatis generator 生成xml文件时覆盖原文件
- 如何解决EV3陀螺仪传感器漂移问题
- oc 中正则表达式不区分中英文分号的问题
- 用canvas让美女沉浸在音符的海洋里
- 深大uooc学术道德与学术规范教育第十章
- 胃酸过多症的食疗方 [转]
- 正则表达式检测电子邮件_电子邮件中的垃圾邮件检测
- 计算机类工程硕士研究生实践报告,工程硕士实践的总结报告.docx
- 一个用于银联手机支付的GEM介绍