データが変更されても、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 における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...
<br />矛盾が生じます。私たちのような小さな工房では、デザインとレイアウトは基本的に...
インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...
MySQL 5.7.18 のインストールと問題の概要。今日、新しい MySQL サーバーを導入しまし...
この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...
目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...
1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...
フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...
1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...
目次vueカスタムディレクティブグローバル指令ローカル指示使用フック関数(両方ともオプション)使用方...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...