一目でわかる$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について知らないことがあるかもしれません

推薦する

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

Alibaba Cloud に Docker をインストールする際の問題と解決策

質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...

js のループメソッドとさまざまなトラバーサルメソッド

目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...

Nginx プロセス スケジューリングの問題の詳細な説明

Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...

deepin 2014 システムに MySQL データベースをインストールする方法

Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...

あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボック...

PHP 開発環境の構築に関する win10 docker-toolsbox チュートリアル

画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...

JavaScript の遅延読み込み属性パターンに関する簡単な説明

目次1. はじめに2. オンデマンド属性モード3. 乱雑な遅延読み込み属性パターン4. クラスの唯一...

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...

MySQLトランザクション処理の使用方法とサンプルコードの詳細な説明

MySQL トランザクション サポートは、MySQL サーバー自体にバインドされているのではなく、ス...