Vue アカデミー #6: 非同期更新キュー

Vue は DOM 更新を非同期で実行します!しかし、どういう意味ですか?

まず、非同期更新キューを使用しないとどうなるかを説明します.

通常の場合

配列があり、それを DOM に表示すると想像してください.新しいアイテムをプッシュするたびに、DOM をレンダリングします.

アイテムをいくつか追加するだけでは、それほど劇的ではありません.しかし、この配列に 1000 個のアイテムを同時に追加すると決めたら、DOM を 1000 回レンダリングすることになります!あなたの DOM は爆発します 🤯.

実際には DOM を 1000 回更新する必要はありません.必要なのは 1 回だけです.すべてのアイテムを追加し終わったときにのみ更新する必要があります.

非同期更新キュー

Vue は DOM 更新を非同期で実行します.データの変更が観察されるたびに (この場合は、配列にアイテムを追加します)、DOM を直接更新するのではなく、すべての変更をキュー (バッファ).

数時間 (配列にすべてのアイテムを追加するのに必要な時間) 待ってから、DOM を更新します. 1000 個のアイテムを追加しますが、DOM は 1 回だけ更新します!

このバッファ型重複除外は、不要な計算や DOM 操作を回避する上で重要です.

キューが DOM を更新する瞬間は tick と呼ばれます!

DOM 状態に応じて何らかのアクションを実行する必要がある場合を除いて、通常、これについて注意する必要はありません.ただし、DOM の状態に基づいてアクションを実行することはあまりお勧めできません.DOM の状態ではなく、コンポーネントの状態を使用することをお勧めします.

例

<div id="example">{{ message }}</div>

const vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})

vm.message = 'new message' // change data, but vue will not re-render immediately !

vm.$el.textContent === 'new message' // false since the update is in the Queue, and not updated for the moment in the DOM

// NextTick is the moment where the Queue update all changed !
Vue.nextTick(function () {
  // The DOM is update with the new change!
  vm.$el.textContent === 'new message' // true
})

コールバックの代わりに await this.$nextTick() を使用することもできます!

いくつかのテストケースでは、値が DOM で更新されているかどうかを確認する必要があります.この場合、この更新を確認する前に nextTick を使用する必要があります!

結論またはTLDR

非同期レンダリング キューにより、vue は tick と呼ばれる瞬間の後にのみ DOM を更新できます.これにより、DOM への不要な更新を避けることができます.

DOM の値をチェックする必要がある場合 (推奨されません)、DOM の値をチェックする前に nextTick 待機する必要があります.現時点では更新されません!

この記事を気に入っていただければ幸いです!

🎁 私をフォローして MP ​​を送信すると、新しい本 Underrated skill in javascript, make the difference を無料で入手できます 😁

または HERE を取得

🎁 MY NEWSLETTER

☕️ SUPPORT MY WORKS できます 🙏

🏃‍♂️ 👇でフォローできます

🕊 Twitter :

👨‍💻 Github: https://github.com/Code-Oz

この記事に 🔖 マークを付けることができます!