$nextTick VS setTimeout、その違いを確認してください-Vue.js-php.cn

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

青灯夜游

リリース： 2021-07-14 18:21:30

転載

2415 人が閲覧しました

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

$nextTick VS 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
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>

ログイン後にコピー