vue nextTick源码原理分析

最新推荐文章于 2024-02-22 21:06:25 发布

前端菜菜

最新推荐文章于 2024-02-22 21:06:25 发布

阅读量131

点赞数 1

分类专栏： js VUE

本文链接：https://blog.csdn.net/qq_25919495/article/details/119635647

版权

js 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

VUE

13 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中处理异步操作的方式，通过Promise、MutationObserver、setImmediate等技术实现回调函数的延迟执行。核心是nextTick函数，它用于将回调添加到任务队列并在当前执行栈结束后执行，确保了异步执行的顺序。

摘要由CSDN通过智能技术生成

为了简化便于理解，做了源码的部分省略，更多请查看源码

  const callBacks = []; //收集回调函数
    let open = false; // 门闩开关
    let timerFunc = null;


    function timerFuncHandler() { // 执行回调函数
      open = false;
      callBacks.forEach(fn => {
        fn()
      });
      callBacks.length = 0; //置空
    };


    if (typeof Promise !== "undefined") {
      const p = Promise.resolve()
      timerFunc = function () {
        p.then(timerFuncHandler);
      };
    } else if (typeof MutationObserver !== "undefined") {

      var num = 1;
      var observer = new MutationObserver(timerFuncHandler);
      var textNode = document.createTextNode(num + '');
      observer.observe(textNode, {
        characterData: true // 监测到文本数据变化
      })
      num = (num + 1) % 2; // 修改值
      textNode.data = num; // 更新数据，以此来触发observer.observe函数的监听

    } else if (typeof setImmediate !== 'undefined') {
      timerFunc = () => {
        setImmediate(flushCallbacks)
      }
    } else {
      timerFunc = () => {
        setTimeout(flushCallbacks, 0)
      }
    };

    function nextTick(cb, ctx) {
      callBacks.push(() => { //收集回调
        cb && cb.call(ctx);
      });

      if (!open) { // 关闭门闩
        open = true;
        timerFunc()//执行主句进程收集的函数
      }
    };

    nextTick(function () {
      console.log(12)
    });

    nextTick(function () {
      console.log(102)
    });