Vue における nextTick の役割といくつかの簡単な使用シナリオ

目的

nextTickの役割といくつかの簡単な使用シナリオを理解する

文章

その機能は何ですか?

遅延コールバックは、次の DOM 更新サイクルが完了した後に実行されます。データの変更後すぐにこのメソッドを使用して、更新された DOM を取得します。

Vue のレンダリングプロセスは誰もが知っているか理解していると思います。Vue はデータの変更を監視した後、再レンダリングを行い、VDOM と連携して実際の DOM を更新します。nextTick のトリガー時間は、メソッドが呼び出された後の最初の再レンダリング後です。

使い方は？

使い方は2通りあり、1つはコールバックを渡す方法、もう1つはPromiseを使う方法です。公式の使用例は以下の通りです。

// データを変更 vm.msg = 'Hello'
// DOMはまだ更新されていません Vue.nextTick(function () {
 // DOMが更新されました})

// Promise として使用します (2.1.0 以降の新機能、詳細については以下のヒントを参照してください)
Vue.nextTick()
 .then(関数() {
 // DOMが更新されました})

SPA（単一ファイルコンポーネント）の場合は次のようになります。

<テンプレート>
 <div id="test">{{メッセージ}}</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'アプリ',
 データ（） {
 戻る {
  "msg": "こんにちは世界！"
 }
 },
 方法（） {
 this.msg = "こんにちは世界！";
 this.$nextTick(() => {
  console.log('DOM が更新されました:', document.getElementById('test').innerHTML)
 });
 }
}
</スクリプト>

使用シナリオは何ですか?

いくつかのメソッドは、実行前にレンダリングが完了するまで待つ必要があります。

バインディングを初期化するかDOMを操作する

たとえば、作成およびマウントされたコールバックでレンダリングされた DOM を操作する必要がある場合は、nextTick で関連するロジックを実行する必要があります。これは、DOM にバインドする必要がある古いライブラリを使用する必要がある場合に非常に便利です。

例えば、UEditorをロードするときには、次のようにします。

<テンプレート>
<script id="container" name="content" type="text/plain"> ここに初期化コンテンツを記述します</script>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 マウント() {
  this.nextTick(() => {
   var ue = UE.getEditor('コンテナ');
  });
 }
}

要素の幅を取得する

Vue で要素の幅を取得する方法は 2 つあります。1 つ目は$refs[ref名稱].style.widthを使用する方法で、2 つ目は従来の DOM 操作方法を使用して取得する方法です。ただし、正確な要素の幅を取得するには、DOM レンダリングが完了した後に両方の方法を実行する必要があります。

<テンプレート>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">p 要素の幅を取得します</button>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（） {
 戻る {
  メッセージ: "Hello world!",
  showMe: 偽、
 },
 メソッド: {
  幅を取得します（）{
  this.showMe = true;
  //this.message = this.refs.myWidth.offsetWidth; //TypeError: this.refs.myWidth は未定義です 
  this.nextTick(()=>{
  //DOM 要素が更新された後に実行し、p 要素の属性を取得できます this.message = this.refs.myWidth.offsetWidth; })
  }
 }
 }
}
</スクリプト>