vue nextTick源码原理分析

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

  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)
    });