• Vue中$nextTick实现源码解析


    这篇文章主要为大家介绍了Vue中$nextTick实现源码解析,有需要的朋友可以借鉴参考下!

    先看一个简单的问题

    {{ text }}

    此时打印的结果是什么呢?是 'old'。如果想让它打印 'new',使用 nextTick 稍加改造就可以

    this.$nextTick(() => {
      console.log(this.$refs.div.innerText)
    })

    内部实现

    但是你想过它内部是怎么实现的么,和我们写 setTimeout 有什么区别呢?

    因为平时工作使用的是Vue2,所以我就以Vue2的最新版本2.6.14为例进行分析,Vue3的实现应该也是大同小异。

    源码地址:github.com/vuejs/vue/b…

    为了方便阅读我删掉了注释,只关注最重要的实现

    if (typeof Promise !== 'undefined' && isNative(Promise)) {
      const p = Promise.resolve()
      timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
      }
      isUsingMicroTask = true
    } else if (!isIE && typeof MutationObserver !== 'undefined' && (
      isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      let counter = 1
      const observer = new MutationObserver(flushCallbacks)
      const textNode = document.createTextNode(String(counter))
      observer.observe(textNode, {
    characterData: true
      })
      timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
      }
      isUsingMicroTask = true
    } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
      timerFunc = () => {
    setImmediate(flushCallbacks)
      }
    } else {
      timerFunc = () => {
    setTimeout(flushCallbacks, 0)
      }
    }

    先大概扫一遍可知 $nextTick 主要是通过微任务来实现的,其实在2.5版本中,是采用宏任务与微任务相结合的方式实现的,但因为在渲染和事件处理中一些比较怪异的行为(感兴趣的话可以看下issue),所以最终统一采用了微任务。

    先看第一块:

    if (typeof Promise !== 'undefined' && isNative(Promise)) {
      const p = Promise.resolve()
      timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
      }
      isUsingMicroTask = true
    }

    如果可以使用 Promise ,就采用 promise.then 的方式去执行回调,将任务在下一个tick执行。但是其中 if (isIOS) setTimeout(noop) 这句话是在做什么呢?在iOS >= 9.3.3的UIWebView中,定义的回调函数通过 Promise 的方式推到微任务队列后,队列不刷新,需要靠 setTimeout 来强制更新一下,noop 就是一个空函数。

    再看第二块:

    else if (!isIE && typeof MutationObserver !== 'undefined' && (
      isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      let counter = 1
      const observer = new MutationObserver(flushCallbacks)
      const textNode = document.createTextNode(String(counter))
      observer.observe(textNode, {
    characterData: true
      })
      timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
      }
      isUsingMicroTask = true
    }

    如果不能用 Promise 就降级使用 MutationObserver。创建了一个文本节点,并通过 observer 去观察文本节点的变化。 characterData: true 这个配置就是当文字变化的时候就会执行回调。(counter + 1) % 2 会使文本节点的文字在 0 、 1 、 0 、 1之间不同变化,这样就会被 observer 观察到。MutationObserver 也是微任务。

    然后是第三块:

    else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { 
      timerFunc = () => { 
    setImmediate(flushCallbacks) 
      } 
    }

    当微任务都不被支持时,就要使用宏任务了。其实大多数情况下都不会走到这里,因为 setImmediate 并没有成为正式的标准,并且兼容性很差。

    最后是第四块:

    else {
      timerFunc = () => {
    setTimeout(flushCallbacks, 0)
      }
    }

    最后在所有方案都行不通时,只能采用 setTimeout 的方式。之所以有第三块是因为虽然都是宏任务,但是 setImmediate 会比 setTimeout 快,所以MDN上才会说 setTimeout(fn, 0) 不能成为 setImmediate 的polyfill。就像作者在注释中写的那样:它仍然是比 setTimeout 更好的选择。

    一步一步分析了 $nextTick 源码后,你是否对它的用法理解更加透彻了呢?

  • 相关阅读:
    Jenkins 部署.net core 项目 - NU1301错误
    ICCV 2023 | MPI-Flow:从单视角构建的多平面图像中学习光流
    elasticSearch配置
    LDR6028DRP五V充电芯片OTG传数据充电高端方案
    axios传递数组参数,后台接收不到
    Linux中间件之redis存储原理和字典
    在阿里云请求发短信接口去掉证书验证
    汇总了30余场面试,4-6月Java面经笔记及详解,通用性极强
    Django高级之-分页器
    Oracle Primavera Unifier Version 22.10 新特征
  • 原文地址:https://blog.csdn.net/qq_41221596/article/details/128162765