データが変更されても、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 を操作するために実行します。 適用シナリオ:
DOM の更新は非同期であるため、v-if ディレクティブが DOM 要素の追加と削除を決定するのと同様に、メソッド内で変数に値を割り当てるときに this.$nextTick() を使用しないと、初期値を取得してしまう可能性があります。更新された値を取得したい場合は、this.$nextTick() メソッドを使用する必要があります。 以上がVueにおけるnextTickの詳しい内容です。Vueについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: Tomcat での jar のロードに関する異常な問題の分析と解決
>>: LinuxにMySQLデータベース5.6のソースコードをインストールし、ログインユーザーのパスワードを変更する
Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...
ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...
目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...
序文mv コマンドは、move の略語で、ファイルを移動したり、ファイル名を変更したり (ファイルの...
目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...
Ansible は、Python をベースに開発された新しい自動運用・保守ツールです。 多くの古い運...
HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクト...
1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
目次概要1. store.jsを定義する2. store.js を使用するコンポーネント3. 成果を...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...
xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...
1. コンテナを作成して実行するdocker run -it --rm centos:latest ...