Vue の nextTick について話す

Vue の nextTick について話す

データが変更されても、DOM ビューはすぐには更新されません。変更直後にノードまたはその値を取得しようとすると、結果は未定義になる可能性があります。これは、Vue が応答性を実装するのは、データの変更後に DOM がすぐに変更されるからではなく、特定の戦略に従って DOM を更新するためです。

小さなデモを見てみましょう:

アプリ.vue

<テンプレート>
  <div id="アプリ">
        <div ref="メッセージ">{{メッセージ}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">メッセージを変更する</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  データ(){
    戻る {
      メッセージ:「こんにちは Vue」
      メッセージ1: ''、
    }
  },
  方法:{
    変更メッセージ(){
      this.msg = 'こんにちは世界';
      this.msg1=this.$refs.message.innerHTML;
       console.log("DOM を更新する前: "+this.msg1)
    }
  }
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

コードを実行すると、this.$nextTick メソッドで DOM 操作を実行しないと、this.$refs.message.innerHTML の値に以前の初期値が引き続き保存されることがわかります。

コードを変更します:

アプリ.vue

<テンプレート>
  <div id="アプリ">
        <div ref="メッセージ">{{メッセージ}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">メッセージを変更する</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、  
  データ(){
    戻る {
      メッセージ:「こんにちは Vue」
      メッセージ1: ''、
    }
  },
  方法:{
    変更メッセージ(){
      this.msg = 'こんにちは世界';
      // this.msg1=this.$refs.message.innerHTML;
      // console.log("DOM を更新する前: "+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("DOM を更新した後: "+this.msg1)
        })
    }
  }
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

コードを変更すると、公式 Web サイトで説明されているように、this.$nextTick を使用して更新された値を簡単に受け取ることができることがわかります。遅延されたコールバックは、次の DOM 更新サイクルが終了した後に実行されます。更新された DOM を取得するには、データを変更した直後にこのメソッドを使用します。

コードを変更して比較してみましょう。

アプリ.vue

<テンプレート>
  <div id="アプリ">
        <div ref="メッセージ">{{メッセージ}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">メッセージを変更する</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、  
  データ(){
    戻る {
      メッセージ:「こんにちは Vue」
      メッセージ1: ''、
    }
  },
  方法:{
    変更メッセージ(){
      this.msg = 'こんにちは世界';
      this.msg1=this.$refs.message.innerHTML;
       console.log("DOM を更新する前: "+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("DOM を更新した後: "+this.msg1)
        })
    }
  }
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

コードを変更すると、this.$nextTick(callback) の役割が簡単にわかります。callback はコールバック関数であり、DOM を操作するために実行します。

適用シナリオ:

  • Vue の created() ライフサイクルフック関数で DOM 操作を実行する場合は、必ず DOM 操作を this.$nextTick(); に入れてください。
  • 作成フック関数がトリガーされると、DOM はレンダリングされないため、DOM がレンダリングされない場合、DOM 操作は間違いなく無駄になります。
  • したがって、create で DOM 操作を実行するときは、DOM 操作を this.$nextTick(); に配置する必要があります。
  • その逆はマウントです。マウントがトリガーされると、DOM のマウントとレンダリングが完了しているため、マウントされた状態で DOM 操作を実行しても問題はありません。

DOM の更新は非同期であるため、v-if ディレクティブが DOM 要素の追加と削除を決定するのと同様に、メソッド内で変数に値を割り当てるときに this.$nextTick() を使用しないと、初期値を取得してしまう可能性があります。更新された値を取得したい場合は、this.$nextTick() メソッドを使用する必要があります。

以上がVueにおけるnextTickの詳しい内容です。Vueについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vue nextTickの原理の分析
  • Vue における nextTick の役割といくつかの簡単な使用シナリオ
  • Vue の nextTick の簡単な分析
  • Vue の $nextTick の包括的な分析
  • VUE は DOM を非同期的に更新します - $nextTick を使用して DOM ビューの問題を解決します
  • Vue.js 原理分析: nextTick 実装の詳細説明
  • Vue における this.$nextTick の機能と使用方法
  • Vue での $nextTick と $forceUpdate の使い方の詳細な説明
  • Vue nextTick の使い方と原理の詳細な研究
  • Vue での NextTick の使用例
  • Vue ソースコード nextTick の使用法と原理分析
  • Vue の nextTick について 1 つの記事で学ぶ
  • ブラウザイベントループとvue nextTicketの実装
  • Vue での $nextTick の使い方の説明
  • ソースコードからvueのnextTickの使い方を理解する
  • Vue2.0$nextTickは、データのレンダリングが完了した後にコールバック関数メソッドをリッスンします。
  • DOM を操作する際の vue ディレクティブと $nextTick の違いの詳細な説明
  • Vue nextTick メカニズムの詳細な理解

<<:  Tomcat での jar のロードに関する異常な問題の分析と解決

>>:  LinuxにMySQLデータベース5.6のソースコードをインストールし、ログインユーザーのパスワードを変更する

推薦する

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

CocosCreator で物理エンジン ジョイントを使用する方法

目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...

Linux における mv コマンドの高度な使用例

序文mv コマンドは、move の略語で、ファイルを移動したり、ファイル名を変更したり (ファイルの...

JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)

目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...

LinuxシステムのAnsible自動運用保守導入方法

Ansible は、Python をベースに開発された新しい自動運用・保守ツールです。 多くの古い運...

ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクト...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

Vueのシンプルな状態管理ストアモードを理解する方法

目次概要1. store.jsを定義する2. store.js を使用するコンポーネント3. 成果を...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...

Dockerコンテナの操作手順の概要と詳細説明

1. コンテナを作成して実行するdocker run -it --rm centos:latest ...