【Vue原理】NextTick - 源码版 之 宏微任务的抉择

写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧

研究基于 Vue版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】NextTick - 源码版 之 宏微任务的抉择

nextTick 已经写了三篇文章啦,这是最后一篇源码版,没看过的童鞋可以看看白话版简单了解下拉

【Vue原理】NextTick - 白话版 简单了解下NextTick

在前面的文章 NextTick-源码版之独立自身

埋下过两个问题

1、Vue 在哪里使用到了 宏任务和 微任务

2、Vue 为什么需要 宏任务 和微任务

今天的任务就是解决这两个问题!!!

在这里,大家肯定必须一定要了解了 宏任务和 微任务的哈,这两个东西不赘述了

首先,第一个问题就是宏微任务的使用场景场景


宏微任务的使用场景

1、Vue 一般情况下使用的是微任务

2、在绑定DOM 事件的时候,会使用宏任务。

这么讲,有点笼统,准确地说,应该是

事件回调执行过程中,在JS 主线程为空之后,异步代码执行之前,所有通过 nextTick 注册的异步代码都是用宏任务。

来看看绑定DOM 事件的源码

通过 addEventListener 给 DOM 绑定事件

function add$1(event, handler) {
    handler = withMacroTask(handler);
    target$1.addEventListener(event, handler);

}



function withMacroTask(fn) {    

    return fn._withTask || (fn._withTask = function() {

        useMacroTask = true;        

        var res = fn.apply(null, arguments);

        useMacroTask = false;        

        return res

    })
}

你看到了,把原先DOM 事件的回调包装了一遍,然后通过设置 useMacroTask 来控制注册宏任务

useMacroTask 没见过,在 nextTick 独立流程中已经讲过了的

在调用 nextTick 的时候,正是通过这个变量来控制,此次异步代码注册的任务类型

Vue.nextTick =function (cb, ctx) {


    callbacks.push(function() {
        cb && cb.call(ctx);

    });    



    if (!pending) {

        pending = true;        

        if (useMacroTask) {

            macroTimerFunc();
        } else {
            microTimerFunc();
        }
    }
}

好多,现在我们来解决第二个问题!


为什么需要宏微任务

为什么要特地在事件回调执行期间 使用宏任务啊,想了好好久啊,才脑抽想到去看了下 Vue 的注释

大概意思是这样

本来 Vue 是从来都使用微任务的,因为微任务的优先级比较高,执行比较快。但是同时也是因为这样导致了一个问题

什么问题?

在连续事件发生的期间,微任务就已经执行了

就是

事件回调执行完成之后,会马上执行微任务

那么连续多个事件回调同时执行,就会导致连续多次执行微任务

如果连续多个事件回调中,都有修改数据,如下

this.state = xxxxx

那么很明显,会导致页面频繁的更新,这显然不是我们想要的结果

那到底什么是连续的事件?

那就是冒泡!

我们来现场演示一下微任务下的冒泡事件

<div style="height:100px;width:100px;background:red">
  <div style="height:60px;width:60x;background:black">
    <div style="height:30px;width:30px;background:blue">
    </div>

  </div>

</div>
div1.onclick = function() {    

    console.log("div1");

    Promise.resolve().then(() = >{        

        console.log("promise1")

    })
}

div2.onclick = function() {    

    console.log("div2");    

    Promise.resolve().then(() = >{        

        console.log("promise2")

    })
}

div3.onclick = function() {    

    console.log("div3");    

    Promise.resolve().then(() = >{        

        console.log("promise3")

    })
}
公众号

看到了吗,promise 在一个事件回调结束之后马上就调用了

如果在 Vue 中的事件回调中修改了数据 this.state = xxxxx

然后数据一更改,就会注册微任务用于响应更新,然后事件结束之后,马上执行微任务

如果三个事件回调都有修改数据,那么就会注册三次,执行三次,就会更新三次

所以

尤大想到了一个方法,就是在事件回调执行时,注册的是宏任务

宏任务并不会在事件结束之后马上调用

只会在连续事件结束之后,才调用,这就是我们想要的

所以你才能看到 使用 useMacroTask 来控制注册的任务类型

现在我把上面的例子中的 promise 换成 setTimeout,重新点击一下

公众号

但是!!

在 【Vue 2.6】 中,我们已经看不到 useMacroTask 的身影了,为什么?

因为 Vue 又全部使用微任务了........ 天道轮回.....

(其实并不是全部是微任务,兼容写法最后是 setTimeout)

你问,那冒泡又怎么办?

好吧,尤大想到了另一个办法来解决冒泡的问题

就是判断当时的 事件 target,来判断是否执行事件回调

也就间接解决了这个问题,看看新的绑定事件的源码

function add$1(name, handler) {
    handler = function(e) {        

        if (

            e.target === e.currentTarget ||

            e.target.ownerDocument !== document

        ) {  

          return  handler.apply(this, arguments)

        }
    };
    target$1.addEventListener(name, handler);
}

通过判断 target 就解决了冒泡,但是这样就不能用冒泡了好像??

也不知道有没有什么坏处,如果有的话,后面尤大肯定会更新的

公众号

本文分享自微信公众号 - 神仙朱(skying-zhu)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端自习课

【Vuejs】242-7个有用的Vue开发技巧

随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用...

9820
来自专栏前端自习课

【Vuejs】212- 如何优雅的在 vue 中添加权限控制

本文转载自掘金专栏,作者:邪瓶张起灵https://juejin.im/post/5c7bae3ff265da2db27950f3

10530
来自专栏前端自习课

【JS】218-JavaScript简史:从网景到前端框架三巨头

从上世纪 90 年代中期发行以来,JavaScript 就已经成为最流行的 Web 开发语言之一了。尽管 JavaScript 最初只是一个浏览器脚本语言,但是...

9830
来自专栏微卡智享

.net Core创建vuejs应用

在cmd中输入dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

8630
来自专栏微卡智享

VueJs里定义类去引用实现赋值加页面刷新

最近项目中要做前端的东西,前阵子简单学习了一点Vue,所以这次项目中直接用Vue来进行编码,因为这个项目的目的主要就是练习加提高自己,所以就边学边做。

15630
来自专栏萝卜大杂烩

Vue + Flask 小知识(三)

我们做一个简单的页面,两个输入框用来输入搜索条件,一个表格用来展示数据,先看下页面效果

14330
来自专栏微卡智享

【干货】Vue TypeScript根据类生成签名字符串

今天我们来说一下VueJs里根据类生成签名,标题里面说了TypeScript是因为语法相对于JavaScript严格的多,导致里面一个小问题又花费了我一两天的时...

8020
来自专栏志学Python

实习一周的总结

实习一周的感觉,就是,因为我大学学的不是计算机专业的,所以没有多大经验,包括自己自学的话,是有很多局限性的,因为不知道外面企业的项目是怎么写的,而且我自己在自学...

14110
来自专栏微卡智享

.net Core中Vue.js里使用Element-UI

每次自己尝试用新东西时,所花的时间真的不是一般的多,以前刚开始学Vue的时候用VSCode直接引入ElementUI比较简单,这次项目因为用.net Core生...

13630
来自专栏程序源代码

基于SpringCloud的RBAC权限管理系统

基于 Spring Cloud Greenwich.SR2 、Spring Security OAuth2 的RBAC权限管理系统;基于数据驱动视图的理念封装 ...

1.2K60

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励