手机版
首页 >> 热点>> 正文

JS事件循环与vue.nextTick

2020-04-06 22:37来源:互联网编辑:小TT

vue根据数据自动渲染页面,但不是数据改变后立即更新页面,而是根据一定的策略去更新页面。

单线程

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

任务队列(TaskQueue)

在 Vue 的文档中,说明 Vue 是异步执行 DOM 更新的。关于异步的解析,可以查看阮一峰老师的这篇文章。截取关键部分如下:

具体来说,异步执行的运行机制如下所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)

主线程之外,还存在一个“任务队列”task queue只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。

一旦“执行栈”中的所有同步任务执行完毕,就会读取“任务队列”看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

主线程不断重复上面的第三步。

JS事件循环与vue.nextTick(图1)

taskqueue.png

事件循环(EventLoop)

主线程从“任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)

JS事件循环与vue.nextTick(图2)

loop.png

上图中,主线程运行的时候,产生堆(heap)和栈(stack)栈中的代码调用各种外部API,它们在“任务队列”中加入各种事件(click,load,done)只要栈中的代码执行完毕,主线程就会去读取“任务队列”依次执行那些事件所对应的回调函数。

Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新,如下代码

//改变数据vm.message = changed//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新console.logvm.$el.textContent // 并不会得到changed//这样可以,nextTick里面的代码会在DOM更新后执行Vue.nextTickfunction{ console.logvm.$el.textContent //可以得到changed}

JS事件循环与vue.nextTick(图3)

nexttick.png

事件循环:

第一个 tick(图例中第一个步骤,即本次更新循环)

首先修改数据,这是同步任务。同一事件循环的所有的同步任务都在主线程上执行,形成一个执行栈,此时还未涉及 DOM 。

Vue 开启一个异步队列,并缓存在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

第二个 tick(图例中第二个步骤,即下次更新循环)

同步任务执行完毕,开始执行异步 watcher 队列的任务,更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

此时通过 Vue.nextTick 获取到改变后的 DOM 。通过 setTimeout(fn, 0) 也可以同样获取到。

简单总结事件循环:同步代码执行 -> 查找异步队列,推入执行栈,执行Vue.nextTick【事件循环1】 ->查找异步队列,推入执行栈,执行Vue.nextTick【事件循环2】...

总之,异步是单独的一个tick,不会和同步在一个 tick 里发生,也是 DOM 不会马上改变的原因。

nextTick用途

应用场景:需要在视图更新之后,基于新的视图进行操作。

需要注意的是,在 created 和 mounted 阶段,如果需要操作渲染后的试图,也要使用 nextTick 方法。

文档说明:注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

mounted: function ( { this.$nextTick(function ( { // Code that will run only after the // entire view has been rendered })}

本文相关词条概念解析:

队列

队列现象在军事活动中是一个重要现象。它是构成一切军事活动的重要基础。无论是纵观或是横观军事社会活动史,古往今来,一切队列现象都可以自然的区分为三类,即队列实用现象、队列精神现象、队列训练现象。它们是队列问题的三个层面,即相互联系、相辅相成;又相互独立、自成体系。它们以队列精神为主导,队列训练为基础,队列实用为目的。队列的本质是对组织的“序”的规定性。队列不仅是兵教之基,队列更是“组织之母,管理之父”。

网友评论Translation

推荐文章

京东快递业务也迎来开门红,同比暴增184%
京东快递业务也迎来开门红,同比暴增184%
疫情后首个全民购物节火热开启,京东快递业务也迎来开门红。数据显示,开门红期间,京东快递个人快递业务单量继续保持高速增长势头,同比暴增184%,高时效快递服务-特快送揽收单量同比增长超过127%,同城速
查看详情>>
To,B,周周侃,紧扣新基建,华为又要开始了6G的研发
To,B,周周侃,紧扣新基建,华为又要开始了6G的研发
在刚结束的两会里,从技术(人工智能、大数据、云计算…)的发展,到企业生存发展的金融扶持,再到关系民生的食宿行,那场大佬们的头脑风暴,你 get 到哪些信息呢?除了政策相关,在资本侧,融资有一种“爆发”
查看详情>>
它究竟做对了什么,已翻了近10倍
它究竟做对了什么,已翻了近10倍
“市值3700亿,6年翻10倍。”从一家小小的酱油厂,到市值一度赶超茅台,它究竟做对了什么?不得不感慨,这个世界有太多的变数!截至6月3日收盘,海天味业收盘价为114.34元/每股,成交量357.51
查看详情>>
深度,一文读懂,To,B,渠道的优势
深度,一文读懂,To,B,渠道的优势
全文 11971 字刘辉先生有15年互联网 To B 及经验,曾任慧聪网行业经理、58赶集渠道创始人/渠道总监、百度渠道华东区域总监,最早提出确定了“互联网 +财税”的商业模式和服务体系,并被行业模仿
查看详情>>
创投日报,小灵狗出行获6.877亿人民币A轮融资,已经完成6.877亿元人民币的A轮融资,诺信创联,已完成数千万美元B+轮融资,
创投日报,小灵狗出行获6.877亿人民币A轮融资,已经完成6.877亿元人民币的A轮融资,诺信创联,已完成数千万美元B+轮融资,
电商融资披露:36氪获悉,电商SaaS ERP服务商聚水潭今日宣布完成1亿美元C轮融资签约,领投方为高盛,中金资本旗下中金长三角科创基金和原投资方蓝湖资本跟投,泰合资本担任本轮融资独家财务顾问。聚水潭
查看详情>>
发现虫卵已成活,朴诚乳业宣布已完成A轮融资
发现虫卵已成活,朴诚乳业宣布已完成A轮融资
中新经纬客户端6月3日电(张燕征)近日,有消费者向媒体反映,其购买的简爱原味高蛋白酸奶中发现有黄色卵状物,怀疑是虫卵。商家回应这是蛋白质凝固的正常现象,请消费者用胶带封好异物,寄回辨别。消费者第二天准
查看详情>>
聚焦,将以数字时代的商业成长为主题,本届中国绿公司年会在海南召开
聚焦,将以数字时代的商业成长为主题,本届中国绿公司年会在海南召开
2020(第13届)中国绿公司年会确定将于2020年6月22-24日在海南海口举办。年会由中国企业家俱乐部主办,海口市人民政府,企业绿色发展(海口)研究院联合主办,将以“数字时代的商业成长”为主题,着
查看详情>>
当,iPhone数字压力的功能,SE,同样出现在
当,iPhone数字压力的功能,SE,同样出现在
现场是融合了人像摄影和鸡尾酒吧的一家艺术空间,一侧是调酒吧台,一侧是摄影幕布,正面苹果 Logo 映在昏黄灯光下的墙壁上,而整个空间的中心位,是一台摆满了苹果产品的木桌。苹果产品随意但整齐地摆放在桌上
查看详情>>
也将发放特定消费券,专项消费券,可通过京东支付或者支付核销优惠券
也将发放特定消费券,专项消费券,可通过京东支付或者支付核销优惠券
据悉,北京市消费券将面向在京消费者,采用分期分批方式发放,主要包括专项消费券和智能产品消费券;同时,面向城乡低保、特困和低收入家庭等困难群体,社区工、一线医务人员等群体,也将发放特定消费券。智能产品消
查看详情>>
iOS,14的官方泄露,学生党迎来巨大福利
iOS,14的官方泄露,学生党迎来巨大福利
文明美无限这不据外媒最新报道称,iOS 14的代码已经泄露,而有者通过对代码查阅后发现,苹果在新中对Apple Pencil的使用场景有所加强,具体来说就是,在网页浏览场景下的完整支持,不只是滚动浏览
查看详情>>
广易科技网(www.gooyi.net)| 手机版