Vue.js nextTick 源码分析

haruhiSzmy

于 2022-06-11 00:29:21 发布

阅读量238

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42316310/article/details/125229810

版权

本文详细分析了Vue.js中nextTick的源码，包括其在不同环境下的执行方式，如何与数据响应机制结合，以及在数据变化时如何触发微任务队列进行DOM更新。同时，通过实例展示了nextTick和数据赋值导致的微任务执行顺序，揭示了Vue中微任务处理的特殊性，如setter触发和nextTick调用的优先级。

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

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