web-dev-qa-db-ja.com

nextTickとは何ですか、VueJsで何をしますか

ドキュメントを読みましたが、理解できません。私はどのデータ、計算、監視、メソッドが行うのか知っていますが、vuejsでnextTick()は何に使用されますか？

vue.jsvuejs2
53
hidar

nextTick を使用すると、データを変更し、VueJSがデータの変更に基づいてDOMを更新した後、ブラウザーがそれらの変更をページに表示する前に何かを行うことができます。

通常、 開発者はネイティブJavaScript関数setTimeout を使用して同様の動作を実現します。ただし、setTimeoutを使用すると、コールバックを介して制御を戻す前に、ブラウザーへの制御を放棄します。

いくつかのデータを変更したとしましょう。 Vueは、データに基づいてDOMを更新します。 DOMの変更は、ブラウザーによってまだ画面にレンダリングされていないことに注意してください。 nextTickを使用した場合、コールバックはすぐに呼び出されます。次に、ブラウザがページを更新します。 setTimeoutを使用した場合、コールバックは今だけ呼び出されます。

次のような小さなコンポーネントを作成することにより、この動作を視覚化できます。

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

ローカルサーバーを実行します。 Threeというメッセージが表示されます。

次に、this.$nextTickをsetTimeoutに置き換えます

setTimeout(() => {
    this.msg = 'Three';
}, 0);

ブラウザをリロードします。 Twoが表示される前に、Threeが表示されます。

このフィドルをチェックして ライブで見る

VueがDOMをTwoに更新し、ブラウザーに制御を与えたためです。ブラウザにTwoと表示されました。次に、コールバックを呼び出しました。 VueはDOMをThreeに更新しました。ブラウザが再び表示したもの。

nextTickを使用します。 VueはDOMをTwoに更新しました。コールバックを呼び出しました。 VueはDOMをThreeに更新しました。その後、ブラウザに制御を与えました。そして、ブラウザはThreeを表示しました。

それが明確であったことを願っています。

Vueがこれを実装する方法を理解するには、 イベントループ および マイクロタスク の概念を理解する必要があります。

これらの概念を明確に（er）したら、 nextTickのソースコード を確認してください。

82
Prashant

Next Tickでは、基本的に、リアクティブプロパティ（データ）に変更を加えたときにvueがコンポーネントを再レンダリングした後、コードを実行できます。

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

Vue.jsドキュメントから：

次のDOM更新サイクルの後に実行されるコールバックを延期します。データを変更したらすぐに使用して、DOMの更新を待ちます。

詳しくは、 こちら をご覧ください。

11
Daksh Miglani

Vueのドキュメントによると：

Vue.nextTick（[コールバック、コンテキスト]）

次のDOM更新サイクルの後に実行されるコールバックを延期します。データを変更したらすぐに使用して、DOMの更新を待ちます。

うーん、最初は恐ろしいと感じたら、心配しないでください。できるだけ簡単に説明しようと思います。ただし、最初に知っておくべきことが2つあります。

  1. その使用法は一般的ではありません。それらのシルバーマジックカードの1つです。いくつかのVueアプリを作成し、nextTick（）に1回または2回実行しました。

  2. 実際の使用例を見れば、理解しやすくなります。アイデアが得られると、恐怖はなくなり、ベルトの下に便利なツールができます。

それでは行きましょう。

$ nextTickを理解する

私たちはプログラマですよね？大好きな分割統治アプローチを使用して、.nextTick()の説明を少しずつ翻訳していきます。それでは始まります：

コールバックを延期する

さて、コールバックを受け入れることがわかりました。したがって、次のようになります。

Vue.nextTick(function () {
  // do something cool
});

すばらしいです。このコールバックは延期されます（これはミレニアル世代が遅延と言う方法です）まで…

次のDOM更新サイクル。

はい。 VueはDOM更新を非同期に実行することを知っています。これらの更新プログラムを適用する必要があるまで、これらの更新プログラムを「保存」する方法が特徴です。更新のキューを作成し、必要に応じてフラッシュします。次に、DOMが「パッチ」され、最新バージョンに更新されます。

何？

もう一度試してください：コンポーネントがthis.potatoAmount = 3. Vueのように本当に不可欠でスマートなことをすると、コンポーネント（したがってDOM）が自動的に再レン​​ダリングされないことを想像してください。必要な変更をキューに入れます。次に、次の「クロック」のように、キューがフラッシュされ、更新が適用されます。多田！

はい！ nextTick()を使用して、実行されるコールバック関数を渡すことができることを知っています直後データが設定され、DOMが更新されました。

先ほど言ったように…それほど頻繁ではありません。 Vue、React、およびGoogleのもう1つを駆動する「データフロー」アプローチは、これについては言及しませんが、ほとんどの場合不要です。ただし、DOMで一部の要素が表示/非表示/変更されるのを待つ必要がある場合があります。これがnextTickが役に立つときです。

データを変更したらすぐに使用して、DOMの更新を待ちます。

まさに！これは、Vueドキュメントが私たちに提供した最後の定義です。コールバック内では、DOMが更新されているため、「最新の」バージョンとやり取りできます。

それを証明する

わかりましたコンソールを見ると、データの値がnextTickのコールバック内でのみ更新されていることがわかります。

const example = Vue.component('example', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  mounted () {
    this.message = 'updated'

        console.log(
        'outside nextTick callback:', this.$el.textContent
    ) // => 'not updated'

    this.$nextTick(() => {
      console.log(
        'inside nextTick callback:', this.$el.textContent
      ) // => 'not updated'
    })
  }
})


new Vue({
  el: '#app',
    render: h => h(example)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>

ユースケース

nextTickの便利なユースケースを定義してみましょう。

コンポーネントがマウントされたときに何らかのアクションを実行する必要があると想像してください。しかし！コンポーネントだけではありません。また、そのすべての子がマウントされ、DOMで使用可能になるまで待つ必要があります。くそー！マウントされたフックは、コンポーネントツリー全体がレンダリングされることを保証しません。

次のDOM更新サイクルを待つツールがあれば…

ハハア：

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

一言で言えば

したがって：nextTickは、データが設定され、DOMが更新された後に関数を実行する快適な方法です。

DOMを待つ必要があるのは、おそらく何らかの変換を実行する必要があるのか​​、外部ライブラリがその内容をロードするのを待つ必要があるからでしょうか？次にnextTickを使用します。

データが更新されたことを確認する方法として、ユニットテストでnextTickを使用する人もいます。この方法で、彼らはコンポーネントの「更新バージョン」をテストできます。

Vue.nextTick（）またはvm。$ nextTick（）？

心配しないで。両方とも（ほぼ）同じです。 Vue.nextTick()はグローバルAPIメソッドを指し、vm.$nextTick()はインスタンスメソッドです。唯一の違いは、vm.$nextTickは2番目のパラメーターとしてコンテキストを受け入れないことです。常にthis（インスタンス自体とも呼ばれます）にバインドされます。

最後のクールさ

nextTickはPromiseを返すので、async/awaitで完全にクールになり、例を改善できることに注意してください。

async mounted () {
    this.message = 'updated'
    console.log(this.$el.textContent) // 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // 'updated'
}

コンテンツの取得元 ByAdriàFontcuberta

7
Humoyun Ahmad

NextTickとsetTimeoutの使用の違いに関するPranshatの答えをより明確にするために、彼のフィドルを分岐させました： here

mounted() {    
  this.one = "One";

  setTimeout(() => {
    this.two = "Two"
  }, 0);

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

フィドルでは、setTimeOutを使用している場合、コンポーネントがマウントされると、変更を適用する前に初期データが非常に短時間点滅することがわかります。一方、nextTickを使用すると、ブラウザーにレンダリングする前にデータがハイジャックされ、変更されます。そのため、ブラウザは古いデータを知らなくても更新されたデータを表示します。 2つの概念が一挙にクリアされることを願っています。

5
Wale