1. 程式人生 > >Vue.js非同步更新及nextTick

Vue.js非同步更新及nextTick

寫在前面

前段時間在寫專案時對nextTick的使用有一些疑惑。在查閱各種資料之後,在這裡總結一下Vue.js非同步更新的策略以及nextTick的用途和原理。如有總結錯誤的地方,歡迎指出!

本文將從以下3點進行總結:

  1. 為什麼Vue.js要非同步更新檢視?
  2. JavaScript非同步執行的機制是怎樣的?
  3. 什麼情況下要使用nextTick?

先看一個例子

 <template>
  <div>
    <div ref="message">{{message}}</div>
    <button @click="handleClick">點選</button>
  </div>
</template>
複製程式碼
 export default {
    data () {
        return {
            message: 'begin'
        };
    },
    methods () {
        handleClick () {
            this.message = 'end';
            console.log(this.$refs.message.innerText); //列印“begin”
        }
    }
}
複製程式碼

打印出來的結果是“begin”,我們在點選事件裡明明將message賦值為“end”,而獲取真實DOM節點的innerHTML卻沒有得到預期中的“begin”,為什麼?

再看一個例子

 <template>
  <div>
    <div>{{number}}</div>
    <div @click="handleClick">click</div>
  </div>
</template>
複製程式碼
 export default {
    data () {
        return {
            number: 0
        };
    },
    methods: {
        handleClick () {
            for(let i = 0; i < 10000; i++) {
                this.number++;
            }
        }
    }
}
複製程式碼

在點選click事件之後,number會被遍歷增加10000次。在Vue.js響應式系統中,可以看一下我的前一篇文章Vue.js的響應式系統原理。我們知道Vue.js會經歷“setter->Dep->Watcher->patch->檢視”這幾個流程。。

根據以往的理解,每次number被+1的時候,都會觸發number的setter按照上邊的流程最後來修改真實的DOM,然後DOM被更新了10000次,想想都刺激!看一下官網的描述:Vue 非同步執行 DOM 更新。只要觀察到資料變化,Vue 將開啟一個佇列,並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發,只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常重要顯然

JavaScript的執行機制

為了方便理解Vue.js非同步更新策略和nextTick,先介紹以下JS的執行機制,參考阮一峰老師的JavaScript 執行機制詳解:再談Event Loop。摘取的關鍵部分如下:JS是單執行緒的,意思就是同一時間只能做一件事情。它是基於事件輪詢的,具體可以分為以下幾個步驟:

(1)所有同步任務都在主執行緒上執行,形成一個執行棧(execution context stack)。

(2)主執行緒之外,還存在一個"任務佇列"(task queue)。只要非同步任務有了執行結果,就在"任務佇列"之中放置一個事件。

(3)一旦"執行棧"中的所有同步任務執行完畢,系統就會讀取"任務佇列",看看裡面有哪些事件。那些對應的非同步任務,於是結束等待狀態,進入執行棧,開始執行。

(4)主執行緒不斷重複上面的第三步。

上圖就是主執行緒和任務佇列的示意圖。只要主執行緒空了,就會去讀取"任務佇列",這就是JavaScript的執行機制。這個過程會不斷重複。主執行緒的執行過程是一個tick。所有的非同步結果通過“任務佇列”來被排程。任務佇列中主要有兩大類,“macrotask”和“microtask”,這兩類task會進入任務佇列。常見的 macrotask 有 setTimeout、MessageChannel、postMessage、setImmediate;常見的 microtask 有 MutationObsever 和 Promise.then。

事件輪詢

Vue.js在修改資料的時候,不會立馬修改資料,而是要等同一事件輪詢的資料都更新完之後,再統一進行檢視更新。 知乎上的例子:

 //改變資料
vm.message = 'changed'

//想要立即使用更新後的DOM。這樣不行,因為設定message後DOM還沒有更新
console.log(vm.$el.textContent) // 並不會得到'changed'

//這樣可以,nextTick裡面的程式碼會在DOM更新後執行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})
複製程式碼

圖解:

模擬nextTick

nextTick在官網當中的定義:

在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。

以下用setTimeout來模擬nextTick,先定義一個callbacks來儲存nextTick,在下一個tick處理回撥函式之前,所有的cb都會儲存到這個callbacks陣列當中。pending是一個標記位,代表等待的狀態。接著setTimeout 會在 task 中建立一個事件 flushCallbacks ,flushCallbacks 則會在執行時將 callbacks 中的所有 cb 依次執行。

// 儲存nextTick
let callbacks = [];
let pending = false;

function nextTick (cb) {
    callbacks.push(cb);

    if (!pending) {
        // 代表等待狀態的標誌位
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}

function flushCallbacks () {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
        copies[i]();
    }
}
複製程式碼

真實的程式碼比這兒複雜的多,在Vue.js原始碼當中,nextTick定義在一個單獨的檔案中來維護,在src/core/util/next-tick.js中:

/* @flow */
/* globals MessageChannel */

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIOS, isNative } from './env'

const callbacks = []
let pending = false

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

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).
let microTimerFunc
let macroTimerFunc
let useMacroTask = false

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  microTimerFunc = () => {
    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)
  }
} else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}

/**
 * Wrap a function so that if any code inside triggers state change,
 * the changes are queued using a (macro) task instead of a microtask.
 */
export function withMacroTask (fn: Function): Function {
  return fn._withTask || (fn._withTask = function () {
    useMacroTask = true
    const res = fn.apply(null, arguments)
    useMacroTask = false
    return res
  })
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

複製程式碼

加上註釋之後:

 /**
 * Defer a task to execute it asynchronously.
 */
 /*
    延遲一個任務使其非同步執行,在下一個tick時執行,一個立即執行函式,返回一個function
    這個函式的作用是在task或者microtask中推入一個timerFunc,在當前呼叫棧執行完以後以此執行直到執行到timerFunc
    目的是延遲到當前呼叫棧執行完以後執行
*/
export const nextTick = (function () {
  /*存放非同步執行的回撥*/
  const callbacks = []
  /*一個標記位,如果已經有timerFunc被推送到任務佇列中去則不需要重複推送*/
  let pending = false
  /*一個函式指標,指向函式將被推送到任務佇列中,等到主執行緒任務執行完時,任務佇列中的timerFunc被呼叫*/
  let timerFunc

  /*下一個tick時的回撥*/
  function nextTickHandler () {
    /*一個標記位,標記等待狀態(即函式已經被推入任務佇列或者主執行緒,已經在等待當前棧執行完畢去執行),這樣就不需要在push多個回撥到callbacks時將timerFunc多次推入任務佇列或者主執行緒*/
    pending = false
    /*執行所有callback*/
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }

  // 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 */

  /*
    這裡解釋一下,一共有Promise、MutationObserver以及setTimeout三種嘗試得到timerFunc的方法
    優先使用Promise,在Promise不存在的情況下使用MutationObserver,這兩個方法都會在microtask中執行,會比setTimeout更早執行,所以優先使用。
    如果上述兩種方法都不支援的環境則會使用setTimeout,在task尾部推入這個函式,等待呼叫執行。
    參考:https://www.zhihu.com/question/55364497
  */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    /*使用Promise*/
    var p = Promise.resolve()
    var logError = err => { console.error(err) }
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError)
      // 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
    /*新建一個textNode的DOM物件,用MutationObserver繫結該DOM並指定回撥函式,在DOM變化的時候則會觸發回撥,該回調會進入主執行緒(比任務佇列優先執行),即textNode.data = String(counter)時便會觸發回撥*/
    var counter = 1
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
      characterData: true
    })
    timerFunc = () => {
      counter = (counter + 1) % 2
      textNode.data = String(counter)
    }
  } else {
    // fallback to setTimeout
    /* istanbul ignore next */
    /*使用setTimeout將回調推入任務佇列尾部*/
    timerFunc = () => {
      setTimeout(nextTickHandler, 0)
    }
  }

  /*
    推送到佇列中下一個tick時執行
    cb 回撥函式
    ctx 上下文
  */
  return function queueNextTick (cb?: Function, ctx?: Object) {
    let _resolve
    /*cb存到callbacks中*/
    callbacks.push(() => {
      if (cb) {
        try {
          cb.call(ctx)
        } catch (e) {
          handleError(e, ctx, 'nextTick')
        }
      } else if (_resolve) {
        _resolve(ctx)
      }
    })
    if (!pending) {
      pending = true
      timerFunc()
    }
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise((resolve, reject) => {
        _resolve = resolve
      })
    }
  }
})()
複製程式碼

關鍵在於timeFunc(),該函式起到延遲執行的作用。 從上面的介紹,可以得知timeFunc()一共有三種實現方式。

  • Promise
  • MutationObserver
  • setTimeout

用途

nextTick的用途

應用場景:需要在檢視更新之後,基於新的檢視進行操作。

看一個例子: 點選show按鈕使得原來v-show:false的input輸入框顯示,並獲取焦點:

 <div id="app">
  <input ref="input" v-show="inputShow">
  <button @click="show">show</button>  
 </div>
複製程式碼
new Vue({
  el: "#app",
  data() {
   return {
     inputShow: false
   }
  },
  methods: {
    show() {
      this.inputShow = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    }
  }
})


作者:Jee
連結:https://juejin.im/post/5b85b3326fb9a019fc76ecee
來源:掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。