真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

this.msg = 1;
this.msg = 2;
this.msg = 3;

this.msg = 1;
this.age = 2;
this.name = 3;

// Step 1
console.log(1);

// Step 2
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3);
  });
}, 0);

// Step 3
new Promise((resolve, reject) => {
  console.log(4);
  resolve();
}).then(() => {
  console.log(5);
})

// Step 4
setTimeout(() => {
  console.log(6);
}, 0);

// Step 5
console.log(7);

// Step N
// ...

// Result
/*
  1
  4
  7
  5
  2
  3
  6
*/

// 執(zhí)行棧 console
// 微隊列 []
// 宏隊列 []
console.log(1); // 1

// 執(zhí)行棧 setTimeout
// 微隊列 []
// 宏隊列 [setTimeout1]
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3);
  });
}, 0);

// 執(zhí)行棧 Promise
// 微隊列 [then1]
// 宏隊列 [setTimeout1]
new Promise((resolve, reject) => {
  console.log(4); // 4 // Promise是個函數(shù)對象，此處是同步執(zhí)行的 // 執(zhí)行棧 Promise console
  resolve();
}).then(() => {
  console.log(5);
})

// 執(zhí)行棧 setTimeout
// 微隊列 [then1]
// 宏隊列 [setTimeout1 setTimeout2]
setTimeout(() => {
  console.log(6);
}, 0);

// 執(zhí)行棧 console
// 微隊列 [then1]
// 宏隊列 [setTimeout1 setTimeout2]
console.log(7); // 7

// 執(zhí)行棧 then1
// 微隊列 []
// 宏隊列 [setTimeout1 setTimeout2]
console.log(5); // 5

// 執(zhí)行棧 setTimeout1
// 微隊列 [then2]
// 宏隊列 [setTimeout2]
console.log(2); // 2
Promise.resolve().then(() => {
    console.log(3);
});

// 執(zhí)行棧 then2
// 微隊列 []
// 宏隊列 [setTimeout2]
console.log(3); // 3

// 執(zhí)行棧 setTimeout2
// 微隊列 []
// 宏隊列 []
console.log(6); // 6

這里假設(shè)運行環(huán)境中Promise對象是完全支持的，那么使用setTimeout是宏隊列在最后執(zhí)行這個是沒有異議的，但是使用$nextTick方法以及自行定義的Promise實例是有執(zhí)行順序的問題的，雖然都是微隊列任務(wù)，但是在Vue中具體實現(xiàn)的原因?qū)е铝藞?zhí)行順序可能會有所不同，首先直接看一下$nextTick方法的源碼，關(guān)鍵地方添加了注釋，請注意這是Vue2.4.2版本的源碼，在后期$nextTick方法可能有所變更。

/**
 * Defer a task to execute it asynchronously.
 */
var nextTick = (function () {
  // 閉包 內(nèi)部變量
  var callbacks = []; // 執(zhí)行隊列
  var pending = false; // 標(biāo)識，用以判斷在某個事件循環(huán)中是否為第一次加入，第一次加入的時候才觸發(fā)異步執(zhí)行的隊列掛載
  var timerFunc; // 以何種方法執(zhí)行掛載異步執(zhí)行隊列，這里假設(shè)Promise是完全支持的

  function nextTickHandler () { // 異步掛載的執(zhí)行任務(wù)，觸發(fā)時就已經(jīng)正式準(zhǔn)備開始執(zhí)行異步任務(wù)了
    pending = false; // 標(biāo)識置false
    var copies = callbacks.slice(0); // 創(chuàng)建副本
    callbacks.length = 0; // 執(zhí)行隊列置空
    for (var i = 0; i < copies.length; i++) {
      copies[i](); // 執(zhí)行
    }
  }

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve();
    var logError = function (err) { console.error(err); };
    timerFunc = function () {
      p.then(nextTickHandler).catch(logError); // 掛載異步任務(wù)隊列
      // 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); }
    };
  } else if (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 IE11, iOS7, Android 4.4
    var counter = 1;
    var observer = new MutationObserver(nextTickHandler);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
  } else {
    // fallback to setTimeout
    /* istanbul ignore next */
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

  return function queueNextTick (cb, ctx) { // nextTick方法真正導(dǎo)出的方法
    var _resolve;
    callbacks.push(function () { // 添加到執(zhí)行隊列中 并加入異常處理
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    //判斷在當(dāng)前事件循環(huán)中是否為第一次加入，若是第一次加入則置標(biāo)識為true并執(zhí)行timerFunc函數(shù)用以掛載執(zhí)行隊列到Promise
    // 這個標(biāo)識在執(zhí)行隊列中的任務(wù)將要執(zhí)行時便置為false并創(chuàng)建執(zhí)行隊列的副本去運行執(zhí)行隊列中的任務(wù)，參見nextTickHandler函數(shù)的實現(xiàn)
    // 在當(dāng)前事件循環(huán)中置標(biāo)識true并掛載，然后再次調(diào)用nextTick方法時只是將任務(wù)加入到執(zhí)行隊列中，直到掛載的異步任務(wù)觸發(fā)，便置標(biāo)識為false然后執(zhí)行任務(wù)，再次調(diào)用nextTick方法時就是同樣的執(zhí)行方式然后不斷如此往復(fù)
    if (!pending) { 
      pending = true;
      timerFunc();
    }
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve, reject) {
        _resolve = resolve;
      })
    }
  }
})();

回到剛才提出的問題上，在更新DOM操作時會先觸發(fā)$nextTick方法的回調(diào)，解決這個問題的關(guān)鍵在于誰先將異步任務(wù)掛載到Promise對象上。

首先對有數(shù)據(jù)更新的updateMsg按鈕觸發(fā)的方法進(jìn)行debug，斷點設(shè)置在Vue.js的715行，版本為2.4.2，在查看調(diào)用棧以及傳入的參數(shù)時可以觀察到第一次執(zhí)行$nextTick方法的其實是由于數(shù)據(jù)更新而調(diào)用的nextTick(flushSchedulerQueue);語句，也就是說在執(zhí)行this.msg = "Update";的時候就已經(jīng)觸發(fā)了第一次的$nextTick方法，此時在$nextTick方法中的任務(wù)隊列會首先將flushSchedulerQueue方法加入隊列并掛載$nextTick方法的執(zhí)行隊列到Promise對象上，然后才是自行自定義的Promise.resolve().then(() => console.log(2))語句的掛載，當(dāng)執(zhí)行微任務(wù)隊列中的任務(wù)時，首先會執(zhí)行第一個掛載到Promise的任務(wù)，此時這個任務(wù)是運行執(zhí)行隊列，這個隊列中有兩個方法，首先會運行flushSchedulerQueue方法去觸發(fā)組件的DOM渲染操作，然后再執(zhí)行console.log(3)，然后執(zhí)行第二個微隊列的任務(wù)也就是() => console.log(2)，此時微任務(wù)隊列清空，然后再去宏任務(wù)隊列執(zhí)行console.log(1)。

接下來對于沒有數(shù)據(jù)更新的updateMsgTest按鈕觸發(fā)的方法進(jìn)行debug，斷點設(shè)置在同樣的位置，此時沒有數(shù)據(jù)更新，那么第一次觸發(fā)$nextTick方法的是自行定義的回調(diào)函數(shù)，那么此時$nextTick方法的執(zhí)行隊列才會被掛載到Promise對象上，很顯然在此之前自行定義的輸出2的Promise回調(diào)已經(jīng)被掛載，那么對于這個按鈕綁定的方法的執(zhí)行流程便是首先執(zhí)行console.log(2)，然后執(zhí)行$nextTick方法閉包的執(zhí)行隊列，此時執(zhí)行隊列中只有一個回調(diào)函數(shù)console.log(3)，此時微任務(wù)隊列清空，然后再去宏任務(wù)隊列執(zhí)行console.log(1)。

簡單來說就是誰先掛載Promise對象的問題，在調(diào)用$nextTick方法時就會將其閉包內(nèi)部維護(hù)的執(zhí)行隊列掛載到Promise對象，在數(shù)據(jù)更新時Vue內(nèi)部首先就會執(zhí)行$nextTick方法，之后便將執(zhí)行隊列掛載到了Promise對象上，其實在明白Js的Event Loop模型后，將數(shù)據(jù)更新也看做一個$nextTick方法的調(diào)用，并且明白$nextTick方法會一次性執(zhí)行所有推入的回調(diào)，就可以明白其執(zhí)行順序的問題了，下面是一個關(guān)于$nextTick方法的最小化的DEMO。

var nextTick = (function(){

    var pending = false;
    const callback = [];
    var p = Promise.resolve();

    var handler = function(){
        pending = true;
        callback.forEach(fn => fn());
    }

    var timerFunc = function(){
        p.then(handler);
    }

    return function queueNextTick(fn){
        callback.push(() => fn());
        if(!pending){
            pending = true;
            timerFunc();
        }
    }

})();


(function(){
    nextTick(() => console.log("觸發(fā)DOM渲染隊列的方法")); // 注釋 / 取消注釋 來查看效果
    setTimeout(() => console.log(1))
    Promise.resolve().then(() => console.log(2))
    nextTick(() => {
        console.log(3)
    })
})();

關(guān)于“vue頁面渲染是異步的嗎”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。