$nextTick VS setTimeout、その違いを確認してください

この記事では、$nextTick と setTimeout を簡単に比較して、両者の違いを確認します。

フロントエンド開発者 (Xiao Zhi) が Vue バーに入ってきました。アッシュはお気に入りのカクテル、ヌクストを注文しました。バーテンダーさんが一生懸命作ってくれています。それから彼は独り言を言い始めました。

Xiao Zhi さんは、Vue 3 のインスタンス メソッドで $nextTick を発見し、驚いた様子を語りました。 Xiaozhi はしばらく Vue を使用しており、インスタンス メソッドとして $watch と $emit を記述することに慣れてきました。では、$nextTick は何に使用されるのでしょうか? Vue のドキュメントには、「次の DOM 更新サイクルの後に実行されるコールバックが [延期される]」と記載されています。

しかし、シャオジーはそれを信じませんでした。

彼は続けて、これをどのように試みたかを語りました:

this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false

うまくいきました。なぜ？

nextTickそれは何をするのですか?

nextTick次の DOM 更新サイクルまで遅延されるコールバック関数を受け入れます。これは、Vue が「DOM が更新された後に関数を実行したい場合 (これはめったに起こりません)、setTimeout の代わりに nextTick を使用してください」と言っているだけです。 」。

Vue.nextTick(() => {}) // syntax

setTimeout および nextTick パラメーターについては、後ほど説明します。この例を使用して、nextTick:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    this.$nextTick(() => {
        let date = new Date()
        this.currentTime = date.getFullYear()
    });
  }
}
</script>

このコード スニペットを J コンピューターで実行して、の動作を視覚化します。 2021 年が表示されます。 nextTick を削除しても同じ結果が得られないというわけではありません。ただし、Vue はデータの内容に基づいて DOM を変更することを理解する必要があります。

上記のコード スニペットでは、Vue は DOM を 3 に更新してからコールバックを呼び出し、DOM を 2021 に更新し、最後に制御をブラウザーに渡します。ブラウザには 2021 が表示されます。

これまで、コールバック キューにコールバック関数を挿入し、適切なタイミングで関数を実行する nextTick について見てきました。

これに興味があるかもしれません。nextTick のコールバックは、イベント ループ内のマイクロタスクとして使用されます。 nextTick の ソース コード には、「nextTick の動作はマイクロタスク キューを利用し、ローカルの Promise.then または # を介して渡すことができる」と明確に記載されています。 # #MutationObserver にアクセスします。"

setTimeout と nextTick

DOM 更新後に関数を実行するもう 1 つの方法は、JavaScript の

setTimeout() 関数を使用することです。

上記のコードを

setTimeoutnextTick:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    setTimeout(() => {
      let date = new Date()
      this.currentTime = date.getFullYear()
    }, 0);
  }
}
</script>

に置き換えて、このコード スニペットを実行します。まず

3 を参照し、次に 2021 を参照してください。これはすぐに発生するため、この動作が表示されない場合はブラウザを更新する必要があります。

上記のコード スニペットでは、Vue は DOM を

3 に更新し、ブラウザー コントロールを提供します。次に、ブラウザーは 3 を表示し、コールバック関数を呼び出し、DOM を 2021 に更新し、最後にブラウザーに制御を渡します。これで、ブラウザーには 2021 が表示されます。

nextTick の実装は、Promise および MutationObserver をサポートしていないブラウザ (IE 6-10 および Opera Mini ブラウザ) で使用されます。 setTimeout はフォールバック メソッドとして使用され、Promise および MutationObserver (IE 10) をサポートしないブラウザーでは setImmediate が優先されます。

nexttick を使用する場合

• setTimeout
DOM にデータが反映されていることを確認したい場合
• 非同期操作を実行しようとすると、
• Uncaught (in Promise) DOMException などのエラーが発生しました。 Vue は DOM を非同期で更新することに注意してください。

最後に、例を示します:

<div id="app">
  <div ref="listScroll" class="scrolledList">
    <ul ref="scrolledHeight">
      <li v-for="month in months">
        {{month}}
      </li>               
    </ul>
  </div>

  <input type="text" placeholder="Add Month" v-model="month">
  <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button>
</div>

<script src="https://unpkg.com/vue@next"> 
  Vue.createApp({
    data() {
      return {
        month: &#39;&#39;,
        months: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;Aug&#39;]
      }
    },
    mounted() {
      this.updateScrollNextTick()
    },
    methods: {
      addMessage() {
        if(this.month == &#39;&#39;){
          return
        }

        this.months.push(this.month)
        this.month = &#39;&#39;
        this.updateScrollNextTick()
      },
      updateScrollNextTick () {
        let scrolledHeight = this.$refs.scrolledHeight.clientHeight

        this.$nextTick(() => {
          this.$refs.listScroll.scrollTo({
            behavior: &#39;smooth&#39;,
            top: scrolledHeight
          })
        })
      }
    },
  })
  .mount("#app")
</script>

サンプル アドレス: https://codepen.io/ammezie/pen/OJpOvQE

メイン部分:

#実行結果:

#上記のコード スニペットでは、新しい項目がリストに追加されたときに、スムーズに下にスクロールする効果を得る必要があります。コードを見て、

nextTick

を削除するようにコードを変更してみると、スムーズなスクロール効果が失われます。 nextTick の代わりに setTimeout を使用してみることもできます。 概要

この記事では、nextTick がどのように機能するかを検討しました。通常の JavaScript setTimeout との違いを詳しく見ていき、実際の使用例についても取り上げます。

英語原アドレス: https://blog.logrocket.com/ Understanding-nexttick-in-vue-js/

著者: Chimezie Enyinnaya

翻訳著者: フロントエンド Xiaozhi

転載アドレス: https://segmentfault.com/a/1190000040246186

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上が$nextTick VS setTimeout、その違いを確認してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。