Vue nextTixk与任务

leonardofed 发布于2019-08-23 11:36 / 2799人阅读

摘要：以上函数只有是将回调放进队列中，所以是最优方案，只有在不存在的情况下才会走其他方法。也是将回调函数放进中，优点是不需要做超时检测，目前只有浏览器实现。

js的macrotask和microtask

js每次事件循环只从macrotask中读取一个并任务执行，同一个事件循环会把microtask中的任务执行完毕并且先于macrotask

为什么要将数据更新的处理函数放在microtask队列中

两个macrotask中可能穿插着ui重渲染，所以在microtask中在ui重渲染之前把所有的数据更新，一次渲染就能得到最新的DOM结构，减少开销;所以优先把更新数据的操作放在microtask队列中,批处理更新

vue中的nextTick的实现

vue中的nextTick根据浏览器的特性封装，优先级如下

vue@2.5+ Promise > setImmediate > MessageChannel > setTimeout。

vue@<2.5 Promise > MutationObserver > setTimeout

Promise

以上函数只有Promise是将回调放进microTak队列中，所以是最优方案，只有在Promise不存在的情况下才会走其他方法。

将setTimeout放到优先级的最后的原因：

setimeout中的回调并不是放在microtask而是macrotask中，对于重渲染是有开销的；

在回调之前要不断做超时检查, 用setTimeout最快也是4ms发以后调用回调

虽然setTimeout不是最优方案但是可作为兼容性最好的方案

MessageChannel 和 MutationObserver

由于兼容性问题，vue2.5开始抛弃了MutationObserver

MessageChannel拥有port1，port2两个属性，让其中一个port监听onMessage，另一个port发送消息即可，不需要像setTimeout做超时检测，它作为非ie浏览器兼容方案。

onMessage回调会被注册为macroTask。

setImmediate也是将回调函数放进marcoTak中，优点是不需要做超时检测，目前只有ie浏览器实现。

云服务器 GPU云服务器定时任务与触发任务 VUE防抖与节流 nextTixk Vue_Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97199.html

做面试的不倒翁：一道事件循环题引发的血案

摘要：通过查看的文档可以发现整个分为个阶段定时器相关任务，中我们关注的是它会执行和中到期的回调执行某些系统操作的回调内部使用执行，一定条件下会在这个阶段阻塞住执行的回调如果或者关闭了，就会在这个阶段触发事件，执行事件的回调的代码在文件中。 showImg(https://segmentfault.com/img/bVbd7B7?w=1227&h=644); 这次我们就不要那么多前戏，直奔主题...

ispring 2019-08-23 12:17 评论0 收藏0
event loop 与 vue

摘要：但是导致了很明显的性能问题。上述两个例子其实是在这个中找到的，第一个使用的版本是，这个版本的实现是采用了，而后因为的里的有，于是尤雨溪更改了实现，换成了，也就是后一个所使用的。后来尤雨溪了解到是将回调放入的队列。结论对于event loop 可以抽象成一段简单的代码表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

springDevBird 2019-08-02 11:41 评论0 收藏0
event loop 与 vue

摘要：但是导致了很明显的性能问题。上述两个例子其实是在这个中找到的，第一个使用的版本是，这个版本的实现是采用了，而后因为的里的有，于是尤雨溪更改了实现，换成了，也就是后一个所使用的。后来尤雨溪了解到是将回调放入的队列。结论对于event loop 可以抽象成一段简单的代码表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

Barry_Ng 2019-08-23 12:19 评论0 收藏0
JavaScript Event Loop 机制详解与 Vue.js 中实践应用

摘要：机制详解与中实践应用归纳于笔者的现代开发语法基础与实践技巧系列文章。事件循环机制详解与实践应用是典型的单线程单并发语言，即表示在同一时间片内其只能执行单个任务或者部分代码片。 JavaScript Event Loop 机制详解与 Vue.js 中实践应用归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文依次介绍了函数调用栈、MacroTask 与 Micr...

livem 2019-08-21 16:19 评论0 收藏0
Vue: Binding与Watcher

摘要：当数据改变时，我们不需要直接触发所有的回调函数，而是去通知对应的数据的，然后由去执行相应的逻辑。对于其逻辑可能是一个指令用于连接与响应式数据或者是一个侦听器的回调函数，这样就能符合单一职责原则，解除模块之间的耦合度，让程序更易维护。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。接下来的日子我应...

tyheist 2019-08-26 12:09 评论0 收藏0