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 runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

MySQLデータベースとOracleデータベース間のバックアップをインポートする

OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...

ウェブデザインレイアウトの理解

<br />矛盾が生じます。私たちのような小さな工房では、デザインとレイアウトは基本的に...

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...

MySQL 5.7.18 インストールチュートリアルと問題の概要

MySQL 5.7.18 のインストールと問題の概要。今日、新しい MySQL サーバーを導入しまし...

CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...

非常に詳細な基本的なJavaScript構文ルール

目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...

Win10 での MySQL 5.7 の詳細なインストールと設定のチュートリアル

1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...

Vueのフィルターとディレクティブの詳細な説明

目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...

Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...