关于 nextTick 始终使用 microtask 的解决方案

来源:4-9 nextTick

六一888

2020-06-02

在研究这类知识时,遇到这样一段话:在 2.5 当中引入了一个改动,使得当一个 v-on DOM 事件侦听器触发更新时,会使用 Macrotask 而不是 Microtask 来进行异步缓冲。这原本是为了修正一类浏览器的特殊边际情况导致的 bug 才引入的,但这个改动本身却导致了更多其它的问题。在 2.6 里面我们对于原本的边际情况找到了更简单的 fix,因此这个 Macrotask 的改动也就没有必要了。现在 nextTick 将会统一全部使用 Microtask。

我的问题是:如果 nextTick 统一全部使用 Microtask,以下是源代码。

第一个是表示是否为点击的元素;

第二个是表示如果在一个事件传递过程中间执行了 nextTick 的话,那么就在事件冒泡达到后,也不执行处理程序,那么事件冒泡就不管用啦

第三个的 e.timeStamp 为什么可以小于等于 0 ,这个逻辑判断是什么意思?

第四个逻辑在什么情况下 e.target.ownerDocument !== document

这个逻辑是干什么用的?

if (useMicrotaskFix) {

    const attachedTimestamp = currentFlushTimestamp

    const original = handler

    handler = original._wrapper = function (e) {

      if (

        e.target === e.currentTarget ||

        e.timeStamp >= attachedTimestamp ||

        e.timeStamp <= 0 ||

        e.target.ownerDocument !== document

      ) {

        return original.apply(this, arguments)

      }

    }

  }

  target.addEventListener(

    name,

    handler,

    supportsPassive

      ? { capture, passive }

      : capture

  )

}
写回答

1回答

ustbhuangyi

2020-06-03

1. e.timeStamp >= attachedTimestamp 这个是用于在一次 patch 且存在事件冒泡的情况下,通过这个判断避免触发 2 次事件回调,正常情况下如果这个事件处理函数都没有更新, attachedTimestamp 都不会变,肯定一直满足 e.timeStamp >= attachedTimestamp

2. / #9462 iOS 9 bug: event.timeStamp is 0 after history.pushState
// #9681 QtWebEngine event.timeStamp is negative value

3 #9448 bail if event is fired in another document in a multi-page
// electron/nw.js app, since event.timeStamp will be using a different
// starting reference

这几个注释写的很明白了

1
1
六一888
非常感谢!
2020-06-08
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4990 学习 · 1038 问题

查看课程