一目でわかる$nextTickの説明

一目でわかる$nextTickの説明

1. 機能説明

今日は、この小さな機能を実装します。ページがレンダリングされた後、div 要素が表示されます。この div 要素をクリックすると、div 要素が消え、input 要素が表示され、input 要素がフォーカスされます。誰もが簡単だと思うと思いますので、見てみましょう〜

NextTick.vue という名前のコンポーネントを作成します。

ページ内での登録のご紹介

2. 親コンポーネント

<テンプレート>
  <div>
    <次のティック></次のティック>
  </div>
</テンプレート>

<script lang="ts">
「../components/NextTick.vue」からNextTickをインポートします。
エクスポートデフォルト{
  名前:"概要",
  コンポーネント:{
    次のティック
  },
}
</スクリプト>

3. サブコンポーネント NextTick.vue

<テンプレート>
    <div>
        <div>私はコンポーネントです</div>
        <div v-if="flag" class="sun" @click="handerClick">入力を表示</div>
        <input v-else ref="inputRef" class="yuelaing"/>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ(){
        戻る {
            フラグ:true、
        }
    },
    メソッド: {
        ハンドラークリック(){
            this.flag=false;
            this.$refs.inputRef.focus();
        },
    },
}
</スクリプト>

4なぜ未定義なのでしょうか?

this.flag=false;
this.$refs.inputRef.focus();

ページ操作を実行するときは、this.$refs.inputRef.focus();

時間がかかります(まだ更新されていないため、まだ古いページです)

現時点では DOM 要素は取得されていません。

したがって、エラーが報告されます。

解決策1:

ページに要素を取得させるだけです。setTimeoutを使用します。

タイムアウトを設定します(()=>{
      this.$refs.inputRef.focus();
},100)

この問題は次のように対処することが可能です。

しかし、それは非常に非専門的であるように思われます。

解決策2:

// コンポーネントが最新のデータに従ってビューに再レンダリングされると、関数 this.$nextTick(()=>{
    this.$refs.inputRef.focus();
})

5. v-if を v-show に変更するとフォーカスを取得できますか?

「v-if は動的に作成および破棄されるため、作成と破棄のプロセスには時間がかかります。」と言う人もいます。これが v-if が要素ノードを取得できない理由であり、v-show を使用することでこれを回避できます。

あなたの言ったことは意味があると思いますか?

v-ifをv-showに置き換えてみましょう

<テンプレート>
    <div>
        <div>私はコンポーネントです</div>
        <div v-show="flag" class="sun" @click="handerClick">入力を表示</div>
        <input v-show="!flag" ref="inputRef" class="yuelaing"/>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ(){
        戻る {
            フラグ:true、
        }
    },
    メソッド: {
        ハンドラークリック(){
            this.flag=false;
            console.log( this.$refs.inputRef );
            this.$refs.inputRef.focus();
        },
    },
}
</スクリプト>

6. 実際の結果

ページはエラーを報告しなかったものの、フォーカスが合っていなかったことが分かりました。v-showに変更しても、この問題は明らかに解決しませんでした。

この問題の原因は、子コンポーネントでthis.flag=falseの後に、次のコードがすぐに実行されることです。

this.$refs.inputRef.focus();

しかし、実行すると、ビューはまだ更新されておらず、まだ古いページであり、この時点では DOM 要素を取得できないため、 undefined が表示されます。そのため、遅延を追加した後にフォーカスできます。

コンポーネントが最新のデータに基づいてビューに再レンダリングされると、内部の関数が実行されます。

これは$nextTickの基本的な使い方です

this.$nextTick(()=>{
    this.$refs.inputRef.focus();
})

7. コンポーネントをページに変換することでフォーカスを取得できますか?

他にも、子コンポーネントなので、子コンポーネントは親コンポーネントの後にレンダリングされるという意見もあります。したがって、要素ノードは取得されませんでした。

これも理由の一つです...

疑問を解消するために、前の友人が言ったことは正しくないような気がします。サブコンポーネントをページに変換して、

<テンプレート>
  <div>
    <div>私はコンポーネントです</div>
    <div v-show="flag" class="sun" @click="handerClick">入力を表示</div>
    <input v-show="!flag" ref="inputRef" class="yuelaing"/>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ(){
    戻る {
        フラグ:true、
    }
  },
  メソッド: {
      ハンドラークリック(){
        this.flag=false;
        this.$refs.inputRef.focus();
      },
  },
}
</スクリプト>

それでもまだ動作しないことがわかりました。これは、データを更新した後、Vue がリアルタイムで更新されないことを完全に示しています。

データが更新されてからページに表示されるまでには時間差があり、その時間差内でページデータを呼び出しても取得できません。

言い換えると、VueはDOMを更新するときに非同期に実行されます。

8. $nextTickがあるのはなぜか

$nextTickの理由は、Vueのデータが変更された後、ビューのDOMがすぐに更新されず、DOMの更新に時間がかかるためです。

ちょっとした実験を通してこれを見てみましょう

<テンプレート>
  <div>
    <div ref="ユニーク">
      <h1>{{ 続き }}</h1>
    </div>
    <div class="sun" @click="handerClick">値を変更</div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ(){
    戻る {
      続き:「私はデフォルト値です」
    }
  },
  メソッド: {
      ハンドラークリック(){
        this.cont = 'デフォルト値を変更しました';
        console.log('1==>',this.$refs.unique.innerText);
        this.$nextTick(()=>{
          console.log('2==>',this.$refs.unique.innerText);
        })
      },
  },
}
</スクリプト>

最初の値と 2 番目の値が異なることがわかりました。これは、ビュー上の DOM の更新がその間に必要だったためです。この差の範囲内で要素の値を取得しますが、それはまだ古い値です。つまり、最初の値は初期値で、2 番目の値は変更された値です。

データを更新したいので、DOMの値をすぐに取得できます。

そこでvueはこの問題を解決するために$nextTickを提供しています

9. Vue.nextTick と this.$nextTick の違い

Vue.nextTickはグローバルメソッドです

this.$nextTick( [callback] ) はインスタンスメソッドです。

ページには複数のインスタンスが存在する可能性があることは誰もが知っています。つまり、this.$nextTick は特定のインスタンスに対して正確である可能性があります。実際のところ、この 2 つは本質的に同じです。
唯一の違いは、一方がグローバルであり、もう一方が特定のインスタンスに正確であることです。精度が違います。

10. nextTickを使うためのちょっとしたコツ

ライフサイクルマウントがレンダリングされるときに、すべてのサブコンポーネントがレンダリングされることが 100% 保証されるわけではないことは誰もが知っているので、mounted で this.$nextTick を使用して、すべてのサブコンポーネントがレンダリングされることを確認できます。

マウントされたフックは、サーバー側のレンダリング中には呼び出されません。

マウント: 関数 () {
  this.$nextTick(関数() {
    //データが変更されると、
    // ビューを再レンダリングした後、内部のメソッドを実行します // この文は次の文と同等です:
   // 次の DOM 更新サイクルまでコールバックを遅延します // 同等: データの変更後、DOM が更新されるまで待ってから実行します })
}

要約する

これで$nextTickに関する記事は終了です。$nextTickに関する詳細については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue での $nextTick の使い方の説明
  • Vue における this.$nextTick の機能と使用方法
  • Vue2.0$nextTickは、データのレンダリングが完了した後にコールバック関数メソッドをリッスンします。
  • Vue + Vuex が vm.$nextTick を使用する方法の詳細な説明
  • Vue での $nextTick と $forceUpdate の使い方の詳細な説明
  • VUE は DOM を非同期的に更新します - $nextTick を使用して DOM ビューの問題を解決します
  • DOM を操作する際の vue ディレクティブと $nextTick の違いの詳細な説明
  • Vue の $nextTick の包括的な分析

<<:  Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

>>:  Mysqlの自動増分IDについて知らないことがあるかもしれません

推薦する

ハイパーリンクに関するいくつかの質問

<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

Linux で MySQL のデフォルト エンコーディングを変更する方法

開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...

JS関数のカリー化の詳細な説明

目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

Dockerの基礎

序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...

シャトルボックス機能を実装するためのVueの詳細なコード

Vue - シャトルボックス機能を実装します。効果図は次のようになります。 CS 。移行{ ディスプ...

MySQL 8.0.22 のインストールと設定のグラフィックチュートリアル

MySQL8.0.22のインストールと設定(超詳細)参考までに、具体的な内容は次のとおりです。みなさ...

MySql8.023 インストール プロセスの詳細なグラフィック説明 (初回インストール)

まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...

Nginx のタイムドログカットの詳細な説明

序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...