博客列表 >当响应式数据更新的时候,会发生什么?之二

当响应式数据更新的时候,会发生什么?之二

子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong
子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong原创
2022年01月28日 09:58:00720浏览

接上,说完flushSchedulerQueue之后,我们开始说nextTick:

先扫一眼流程图:

微信图片_20220128095458.png

function nextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }

这个方法实际也是在Vue.prototype.$nextTick里调用的方法,注意这里他将传进来的回调函数用一个匿名函数包裹了一下,然后塞进了callbacks里,这个匿名函数开始执行时,我们用nextTick传进来的函数才会执行。callbacks没啥好说的,一个数组,然后pending置为true,调用timerFunc:

 if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve();
    timerFunc = function () {
      p.then(flushCallbacks);
      // In problematic UIWebViews, Promise.then doesn't completely break, but
      // it can get stuck in a weird state where callbacks are pushed into the
      // microtask queue but the queue isn't being flushed, until the browser
      // needs to do some other work, e.g. handle a timer. Therefore we can
      // "force" the microtask queue to be flushed by adding an empty timer.
      if (isIOS) { setTimeout(noop); }
    };
    isUsingMicroTask = true;
  } else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
    // Use MutationObserver where native Promise is not available,
    // e.g. PhantomJS, iOS7, Android 4.4
    // (#6466 MutationObserver is unreliable in IE11)
    var counter = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
    isUsingMicroTask = true;
  } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    // Fallback to setImmediate.
    // Techinically it leverages the (macro) task queue,
    // but it is still a better choice than setTimeout.
    timerFunc = function () {
      setImmediate(flushCallbacks);
    };
  } else {
    // Fallback to setTimeout.
    timerFunc = function () {
      setTimeout(flushCallbacks, 0);
    };
  }

timerFunc 是这么定义得,不必细看看就一句话,有microTask就用microTask,否则就用macroTask,然后我们注意到,实际在timerFunc里是传进去了一个叫flushCallbacks的,这个也没啥好说的,因为简单:

function flushCallbacks () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

就是用来执行callbacks里push进去的一个个匿名函数的。而这一个个回调,正是一个个watcher update的地方,也是vue视图更新的地方。

终。


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议