Vue nextTickの使い方

今回は、Vue nextTickの使い方と、Vue nextTickを使用する際の注意点を紹介します。

export default {
 data () {
  return {
   msg: 0
  }
 },
 mounted () {
  this.msg = 1
  this.msg = 2
  this.msg = 3
 },
 watch: {
  msg () {
   console.log(this.msg)
  }
 }
}

このスクリプトが実行されると、1000m 後に 1、2、3 の順に出力されると推測されます。ただし、実際には 1 回だけ出力されます: 3.なぜそのような状況が起こるのでしょうか？確認してみましょう。

queueWatcher

メッセージをリッスンするために watch を定義します。これは実際には vm.$watch(keyOrFn, handler, options) のように Vue によって呼び出されます。 $watch は、初期化時に vm にバインドされる関数で、Watcher オブジェクトの作成に使用されます。それでは、Watcher でハンドラーがどのように処理されるかを見てみましょう:

this.deep = this.user = this.lazy = this.sync = false
...
 update () {
  if (this.lazy) {
   this.dirty = true
  } else if (this.sync) {
   this.run()
  } else {
   queueWatcher(this)
  }
 }
...

最初に this.deep = this.user = this.lazy = this.sync = false を設定します。つまり、更新がトリガーされると、queueWatcher メソッドは:

const queue: Array<Watcher> = []
let has: { [key: number]: ?true } = {}
let waiting = false
let flushing = false
...
export function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
  has[id] = true
  if (!flushing) {
   queue.push(watcher)
  } else {
   // if already flushing, splice the watcher based on its id
   // if already past its id, it will be run next immediately.
   let 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
   nextTick(flushSchedulerQueue)
  }
 }
}

ここでの nextTick(flushSchedulerQueue) の flashSchedulerQueue 関数は、実際にはウォッチャーの viewUpdate:

function flushSchedulerQueue () {
 flushing = true
 let watcher, id
 ...
 for (index = 0; index < queue.length; index++) {
  watcher = queue[index]
  id = watcher.id
  has[id] = null
  watcher.run()
  ...
 }
}

さらに、待機変数に関して、これは非常に重要なフラグであり、flushSchedulerQueue コールバックが確実に実行されるようにします。コールバックを 1 回だけ入力できます。 次に、nextTick 関数を見てみましょう。nexTick について説明する前に、Vue nextTick も主にこれらの基本原則を使用することを理解する必要があります。まだ理解していない場合は、私の記事「イベント ループの概要」を参照してください。次に、その実装を見てみましょう:

export const nextTick = (function () {
 const callbacks = []
 let pending = false
 let timerFunc
 function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }
 // An asynchronous deferring mechanism.
 // In pre 2.4, we used to use microtasks (Promise/MutationObserver)
 // but microtasks actually has too high a priority and fires in between
 // supposedly sequential events (e.g. #4521, #6690) or even between
 // bubbling of the same event (#6566). Technically setImmediate should be
 // the ideal choice, but it&#39;s not available everywhere; and 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 !== &#39;undefined&#39; && isNative(setImmediate)) {
  timerFunc = () => {
   setImmediate(nextTickHandler)
  }
 } else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
 )) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = nextTickHandler
  timerFunc = () => {
   port.postMessage(1)
  }
 } else
 /* istanbul ignore next */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // use microtask in non-DOM environments, e.g. Weex
  const p = Promise.resolve()
  timerFunc = () => {
   p.then(nextTickHandler)
  }
 } else {
  // fallback to setTimeout
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }
 return function queueNextTick (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
   timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
   return new Promise((resolve, reject) => {
    _resolve = resolve
   })
  }
 }
})()

まず、Vue はコールバック array を通じてイベント キューと、イベント チームには呼び出しを実行するために nextTickHandler メソッドが渡され、何を実行するかは timerFunc によって決定されます。 timeFunc の定義を見てみましょう:

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
   setImmediate(nextTickHandler)
  }
 } else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
 )) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = nextTickHandler
  timerFunc = () => {
   port.postMessage(1)
  }
 } else
 /* istanbul ignore next */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // use microtask in non-DOM environments, e.g. Weex
  const p = Promise.resolve()
  timerFunc = () => {
   p.then(nextTickHandler)
  }
 } else {
  // fallback to setTimeout
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }

timerFunc のマクロタスク --> microTask の定義の優先順位がわかります。Dom のない環境では、weex

setImmediate、MessageChannel VS setTimeout

などの microTask を使用してください。 setTimeout ではなく setImmediate と MessageChannel を最初に定義して、macroTask を作成する必要があるのはなぜですか? HTML5 では、setTimeout の最小遅延時間は 4 ミリ秒であると規定されています。これは、理想的な状況下では、トリガーできる非同期コールバックの最速は 4 ミリ秒であることを意味します。 Vue は非同期タスクをシミュレートするために非常に多くの関数を使用しますが、その目的は 1 つだけで、コールバックを非同期にしてできるだけ早く呼び出すことです。 MessageChannel と setImmediate の遅延は明らかに setTimeout よりも短くなります。

問題解決

これらの基礎を念頭に置いて、上記の問題をもう一度見てみましょう。 Vue のイベント メカニズムはイベント キューを通じて実行をスケジュールするため、メイン プロセスがアイドル状態になるまで待機してからスケジュールを設定するため、戻ってすべてのプロセスが完了するまで待ってから再度更新します。この種のパフォーマンス上の利点は明らかです。例:

マウント時に test の値が ++loop によって 1000 回実行される状況があります。 ++ がトリガーされるたびに、setter->Dep->Watcher->update->run が応答してトリガーされます。 この時点でビューが非同期的に更新されていない場合、++ は DOM を直接操作して毎回ビューを更新することになり、パフォーマンスが非常に消費されます。 したがって、Vue はキューを実装し、キュー内の Watcher の実行は次の Tick (または現在の Tick のマイクロタスク フェーズ) で均一に実行されます。同時に、同じ ID を持つ Watcher が繰り返しキューに追加されることはないため、Watcher の実行が 1,000 回実行されることはありません。ビューの最終更新では、テストに対応する DOM が 0 から 1000 に直接変更されるだけです。 DOM を操作するためにビューを更新するアクションは、現在のスタックが実行された後の次の Tick (または現在の Tick のマイクロタスク フェーズ) で呼び出されることが保証されており、パフォーマンスが大幅に最適化されます。

興味深い質問

var vm = new Vue({
  el: '#example',
  data: {
    msg: 'begin',
  },
  mounted () {
   this.msg = 'end'
   console.log('1')
   setTimeout(() => { // macroTask
     console.log('3')
   }, 0)
   Promise.resolve().then(function () { //microTask
    console.log('promise!')
   })
   this.$nextTick(function () {
    console.log('2')
   })
 }
})

これの実行順序は誰もが知っているはずです: 1、約束、2、3。

1. this.msg = 'end' が最初にトリガーされるため、ウォッチャーの更新がトリガーされ、それによって更新操作のコールバックが vue イベント キューにプッシュされます。

2. this.$nextTick は、イベント キュー プッシュ用の新しいコールバック関数も追加します。これらはすべて、setImmediate --> MessageChannel --> Promise --> setTimeout を通じて timeFunc を定義します。 Promise.resolve().then は microTask であるため、最初に Promise を出力します。

3. MessageChannel と setImmediate がサポートされている場合、それらの実行順序は setTimeout より前になります (IE11/Edge では、setImmediate の遅延は 1 ミリ秒以内に収まりますが、setTimeout の最小遅延は 4 ミリ秒であるため、setImmediate は setTimeout(0) よりも高速です) コールバック関数 次に、イベントキューで最初にコールバック配列が受信されるため、2が出力され、次に3

4. が出力されます。ただし、MessageChannelとsetImmediateがサポートされていない場合、timeFuncはPromiseを通じて定義されます。 2.4 より前の古いバージョンの Vue も最初に Promise を実行します。この状況では、順序は 1、2、約束、3 になります。 this.msg は最初に dom update 関数をトリガーする必要があるため、最初に dom update 関数が非同期時間キューへのコールバックによって受信され、次に Promise.resolve().then(function () { console.log('promise! ')} が定義され、そのような microTask が定義され、$nextTick がコールバックによって収集されます。キューが先入れ先出しの原則を満たしていることがわかっているため、コールバックによって収集されたオブジェクトが最初に実行されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

透明グラデーションアニメーションを実現するためのJSの操作方法

簡単な折りたたみと展開のアニメーションを実現するためのJSの操作方法

以上がVue nextTickの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。