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内の他の関連記事もぜひご覧ください！

以下もご興味があるかもしれません: