非同期更新キューnextTick

でVueのDOMを更新するには、非同期で実行されます。

限り、リスナーがデータを変更すると、Vueがキューを開くと、すべてのデータ変更が同じイベントループ内で発生バッファます。

複数のトリガー同じウォッチャーなら、それは一度だけキューにプッシュ。不要な計算やDOM操作を避けるために、バッファ内のこの重複除外データは非常に重要です。

そして、次のイベントループで、Vueのリフレッシュキューおよび実行する実際の（すでに重複排除）仕事で「カチカチ」。ネイティブ使用するためにVueの内部で非同期キュートライ Promise.then、MutationObserver および setImmediate、実行環境をサポートしていない場合、それは採用する setTimeout(fn, 0) 代わりに。

あなたが設定したときにたとえば、 vm.someData = 'new value'そのコンポーネントは、すぐに再レンダリングされません。リフレッシュキューは、コンポーネントがイベントループになるときは次のアップデートで「カチカチ」。ほとんどの場合、私たちはこのプロセスを気にする必要はありませんが、あなたは少しトリッキーかもしれない何かを、行うには、更新DOMに基づいた状態にしたい場合。

Vue.jsは通常が思考の「データ駆動型」の方法を使用する開発者を奨励する DOMとの直接接触を避けるために、時には我々はしなければなりません。

データの変更後に更新待ちVueのDOMを完了するためには、データの変更の直後に使用することができます Vue.nextTick(callback)。更新が完了DOMした後ので、コールバック関数が呼び出されます。例えば：

で使用されるコンポーネント vm.$nextTick() 、それはグローバルを必要としないため、この方法の例としては、特に便利です Vueし、コールバック関数は、 this 自動的に現在のインスタンスのVueにバインドします。

Vue.component（ '例えば' 、{
  テンプレート： '<スパン> {{メッセージ}} </スパン>' 、
  データ：関数（）{
     リターン{
      メッセージ：「非更新」の
    }
  }、
  方法：{
    updateMessage：関数（）{
       この .message = '已更新' 
      はconsole.log（これ。$ el.textContent）// => '未更新'が
      これ。$ nextTick（関数（）{
        console.log（この。$ el.textContent）// => '更新'の
      }）
    }
  }
}）

ので $nextTick() 戻って Promise 新しい使用できるように、オブジェクトは、 ES2017の非同期を/のawait 文法は同じことを達成します：

方法：{
  updateMessage：非同期機能（）{
     この .message = '已更新' 
    はconsole.log（この $ el.textContent。）// => '未更新' 
    のawait この$ nextTick（）。
    console.log（この。$ el.textContent）// => '更新'の
  }
}

おすすめ