乐趣区

关于javascript:Vuejs-nextTick-源码分析

作者：

jiezi

在

nextTick

vue版本

2.6.11

源码剖析(nextTick)

nextTick源码调用过程总结：

init->timerFunc = (Promise/MutationObserver/setImmediate)
初始化阶段为timerFunc的执行形式赋值，一般来说在Windows浏览器环境下运行timerFunc函数的执行形式都会是Promise.then的形式，应用微工作队列的形式。

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  timerFunc = function () {
    p.then(flushCallbacks);
    if (isIOS) { setTimeout(noop); }
  };
  isUsingMicroTask = true;
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  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)) {
  timerFunc = function () {
    setImmediate(flushCallbacks);
  };
} else {
  timerFunc = function () {
    setTimeout(flushCallbacks, 0);
  };
}

$nextTick(fn)->callbacks.push(function(){fn.call(this)})->timerFunc()
应用nextTick的源码如下：

function nextTick (cb, ctx) {
  console.log('vue nexttick')
  var _resolve;
  callbacks.push(function () { // 全局变量callbacks
    if (cb) {
      try {
        cb.call(ctx); // 这里调用回调
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
  if (!pending) {
    pending = true; // 只执行一次timerFunc函数
    timerFunc();
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(function (resolve) {
      _resolve = resolve;
    })
  }
}

如上所示，在一次宏工作中执行屡次nextTick只会调用一次timerFunc()，timerFunc()会将flushCallbacks函数放入JavaScript的微工作队列中，待顺序调用。

......
var p = Promise.resolve();
  timerFunc = function () {
    p.then(flushCallbacks);
    if (isIOS) { setTimeout(noop); }
  };
  ......
function flushCallbacks () {
  pending = false;
  var copies = callbacks.slice(0);
  callbacks.length = 0;
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

其次，$nextTick()是即时调用的,并且会将传入的函数的this值变成以后Vue实例

Vue.prototype.$nextTick = function (fn) {
    return nextTick(fn, this)
  };

源码剖析(set过程)

Vue对每个组件中的data都做了数据代理（截持）,对data对象中的数据进行赋值操作，理论就会调用defineProperty中的reactiveSetter函数，进行一系列操作，包含告诉Watcher数据扭转了等等。

其中setter源代码如下，不止进行赋值操作，还会调用dep.notify()告诉数据扭转了:

set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter();
      }
      if (getter && !setter) { return }
      if (setter) {
        setter.call(obj, newVal); // 这里进行赋值操作
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify(); // 这里进行告诉
    }

Dep对象次要作用是记录以后组件依赖的Watcher(?不分明，之后再来看)

总而言之，调用了Dep原型上的notify函数,再接着调用Watcher原型上的update办法

Dep.prototype.notify = function notify () {
  var subs = this.subs.slice();
  if (process.env.NODE_ENV !== 'production' && !config.async) {
    subs.sort(function (a, b) { return a.id - b.id; });
  }
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

update办法,这里调用了要害的queueWatcher函数

Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
};

queueWatcher函数做了两件要害的事
1、向queue变量中push watcher
2、调用一次nextTick,将flushSchedulerQueue塞进微工作队列。
重要：也就是说，只有在宏工作运行过程中对data进行了一次赋值,就会往微工作队列中塞一个flushSchedulerQueue函数的微工作（个别是Promise）。waiting只会在flushSchedulerQueue执行之后再次赋为false

function queueWatcher (watcher) {
  var id = watcher.id;
  if (has[id] == null) {
    has[id] = true;
    if (!flushing) {
      queue.push(watcher);  // 退出queue
    } else {
      var i = queue.length - 1;
      while (i > index && queue[i].id > watcher.id) {
        i--;
      }
      queue.splice(i + 1, 0, watcher);
    }
    // queue the flush
    if (!waiting) {
      waiting = true;
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue();
        return
      }
      nextTick(flushSchedulerQueue);  // nextTick flushSchedulerQueue
    }
  }
}

要害：flushSchedulerQueue函数做了什么：
1、遍历queue变量，获得watcher
2、watcher.before()调用，这个时候就是组件生命周期中的beforeUpdate回调告诉的时候。
3、watcher.run()调用，如果watcher对应的组件有配置watch，就是这个时候执行回调，并且进行数据和DOM更新。
4、resetSchedulerState()调用，将waiting=false，此时数据曾经更新结束，下次触发reactiveSetter，则从新调用nextTick
5、callUpdatedHooks,callActivatedHooks调用，别离对应生命周期中的activated和updated

function flushSchedulerQueue () {
  // debugger
  currentFlushTimestamp = getNow();
  flushing = true;
  var watcher, id;
  queue.sort(function (a, b) { return a.id - b.id; });

  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    if (watcher.before) {
      watcher.before();  // beforeUpdate回调(如果before属性存在的话)
    }
    id = watcher.id;
    has[id] = null;
    watcher.run();  // 如果有配置watche监督属性

    // .... loop报错揭示  ....
  }
  // keep copies of post queues before resetting state
  var activatedQueue = activatedChildren.slice();
  var updatedQueue = queue.slice();

  resetSchedulerState();

  // call component updated and activated hooks
  callActivatedHooks(activatedQueue);
  callUpdatedHooks(updatedQueue);

  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit('flush');
  }
}

实例剖析

这是我本人刚刚碰到的案例，组件中触发以下代码：

const pro = new Promise((resolve, reject)=>{
    console.log('promise immediate 111')
    resolve('ok')
}).then(()=>{
    console.log('promise then 111')
})
this.$nextTick(()=>{
    console.log('nexcTick 111')
})
new Promise((resolve, reject)=>{
    console.log('promise immediate 222')
    resolve('ok')
}).then(()=>{
    console.log('promise then 222')
})
this.$nextTick(()=>{
    console.log('nexcTick 222')
})
this.visible = false // 数据操作
this.$nextTick(()=>{
    console.log('nexcTick 333')
})

以上代码，依照我一开始的认知，输入程序应该是：
promise immediate 111
promise immediate 222
nexcTick 111
promise then 222
nexcTick 222
nexcTick 333
但其实不然，操作数据触发了reactiveSetter，它理论退出微工作队列的程序是：
1、promise then 111 微工作1
2、nexcTick 111 -> callbacks
3、flushCallbacks函数 微工作2
4、promise then 222 微工作3
5、nexcTick 222 -> callbacks
6、setter调用, flushSchedulerQueue -> callbacks
7、nexcTick 333 -> callbacks
在Vue源码nextTick函数中退出console输入，验证猜测：

function nextTick (cb, ctx) {
  var _resolve;
  console.log(`${cb.name?cb.name:'箭头函数'}退出了callbacks`)
  callbacks.push(...);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

后果：

总结

setter触发时的总过程:
1、reactiveSetter。这里首先扭转data对象中的值,然而DOM尚未更新，能够说先存着
2、dep.notify。这里告诉该组件[依赖]的每个watcher
3、Watcher.update。这里调用queueWatcher，让wacher入队列，为更新做筹备。另：如果强制同步更新DOM的话，这里就执行this.run(),执行对应的DOM更新操作。
4、queueWatcher。这里让watcher入待执行队列，并且如果是本次更新操作第一次setter，则调用nextTick函数，让flushSchedulerQueue函数退出微工作队列。
5、flushSchedulerQueue。这里函数开始执行，代表宏工作曾经执行结束，开始执行微工作队列，这里将通过beforeUpdate->更新DOM->updated的过程

nextTick触发时的总过程:
0、timerFunc赋值。依据操作系统不同，个别是Promise形式执行异步工作。
1、nextTick。往callbacks队列中退出一个待执行的回调，如果是一个更新周期中首次执行该函数，则调用timerFunc，将flushCallbacks函数退出微工作队列。
2、flushCallbacks。这里顺次遍历callbacks队列中的待执行工作，程序执行，此时可能有用户本人调用的nextTick回调，也有可能中途执行了setter操作，插入了flushSchedulerQueue回调。在flushSchedulerQueue工作前后执行代码， 状况齐全不同，这也是为什么在编写代码的过程中可能呈现不合乎预期的状况。

总结：
Vue中对于微工作的解决，尽管只插入一个微工作，然而数组形式存的待执行工作，就算是后执行的setter或者nextTick，都能排在第一个nextTick或者setter调用时的优先程序执行。有种插队的感觉。

局部未提及源码

flushSchedulerQueue中watcher.before函数,对应beforeUpdate生命周期

  new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);

flushSchedulerQueue中watcher.run函数,此时进行数据更新

Watcher.prototype.run = function run () {
  if (this.active) {
    var value = this.get();
    if (
      value !== this.value ||
      isObject(value) ||
      this.deep
    ) {
      // set new value
      var oldValue = this.value;
      this.value = value;
      if (this.user) {
        var info = "callback for watcher \"" + (this.expression) + "\"";
        invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info);
      } else {
        this.cb.call(this.vm, value, oldValue); // 这里是watch回调
      }
    }
  }
};

flushSchedulerQueue中callUpdatedHooks函数，生命周期updated

function callUpdatedHooks (queue) {
  var i = queue.length;
  while (i--) {
    var watcher = queue[i];
    var vm = watcher.vm;
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated');
    }
  }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章