DOMを操作するためのvue命令と$nextTickの違いは何ですか？

この記事は、DOM を操作するための vue 命令と $nextTick の違いを紹介します。これは良い参考値であり、困っている友人に役立つことを願っています。

非同期更新キュー

まだ気づいていないかもしれませんが、Vue は DOM 更新を非同期で実行します。データ変更が観察されるたびに、Vue はキューを開き、同じイベント ループ内で発生するすべてのデータ変更をバッファーに入れます。同じウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。バッファリング中のこの重複排除は、不必要な計算や DOM 操作を回避するために重要です。次に、次のイベント ループ「ティック」で、Vue はキューをフラッシュし、実際の (重複排除された) 作業を実行します。 Vue は内部的に、非同期キューにネイティブの Promise.then と MessageChannel を使用しようとします。実行環境がそれをサポートしていない場合は、代わりに setTimeout(fn, 0) が使用されます。

たとえば、 vm.someData = 'new value' と設定すると、コンポーネントはすぐには再レンダリングされません。キューがフラッシュされると、イベント ループ キューがクリアされる次の「ティック」でコンポーネントが更新されます。ほとんどの場合、このプロセスについて心配する必要はありませんが、DOM 状態が更新された後に何かをしたい場合は、少し注意が必要になることがあります。 Vue.js は通常、開発者が「データ駆動型」の方法で考え、DOM に直接触れないようにすることを推奨していますが、実際にそうする必要がある場合もあります。データ変更後に Vue が DOM の更新を完了するのを待つには、データ変更直後に Vue.nextTick(callback) を使用します。このコールバック関数は、DOM の更新が完了した後に呼び出されます。例:

<p>{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

グローバル Vue を必要としないため、コンポーネント内で vm.$nextTick() インスタンス メソッドを使用すると特に便利です。コールバック関数内のこれは、現在の Vue インスタンスに自動的にバインドされます:

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

vue 命令

フック関数

命令定義オブジェクトは、次のフック関数を提供できます (すべてオプション):

bind: 1 回だけ呼び出され、最初に命令が要素にバインドされたときに呼び出されます。時間。ここではワンタイムの初期化設定を行うことができます。

inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。

update: コンポーネントの VNode が更新されるときに呼び出されますが、子 VNode が更新される前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます (フック関数のパラメーターの詳細については以下を参照してください)。

componentUpdated: 命令が配置されているコンポーネントの VNode とそのサブ VNode がすべて更新された後に呼び出されます。

unbind: 命令が要素からバインド解除されるときに 1 回だけ呼び出されます。

フック関数のパラメーター (つまり、el、バインディング、vnode、oldVnode)。

更新するとき、DOM はまだドキュメントを挿入していない可能性がありますが、componentUpdated は DOM がすでにドキュメントを挿入していることを意味することに注意してください。さらに、いわゆる「更新」フック関数のトリガー条件は非常に幅広く、制御が困難です。たとえば、ノードに関係のない隣接する他のノードが更新されると、そのレイアウトのリフローが発生し、フック関数もトリガーされます。そのため、データが更新された後に DOM を操作したい場合は、次の操作が必要になります。 updateとcomponentUpdated命令を使用するときは注意してください、nextTickの使用を検討してください

おすすめ関連記事:

環境別Vueプロジェクトのパッケージ化方法まとめ

v-modelの実装原理とは？ v-modelの使い方を紹介（コード付き）

以上がDOMを操作するためのvue命令と$nextTickの違いは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。