VUEがDOMを非同期的に更新します。$nextTickでDOMビューの問題を解決します。

4016 ワード

VUE 非同期 $nextTick DOMビュー

VUE非同期更新DOM
まず、VueはDOMを更新する時非同期で実行します！
したがって、データの変化を聞き出すと、Vueはキューを開いて、同じイベントサイクルで発生するすべてのデータの変更をバッファリングします。同じウォッチが何度か触発されると、列の中に押し込まれるだけです。このようなバッファリング時の重複データの除去は，不要な計算とDOM動作を避けるために重要である。そして、次のイベントサイクル「tick」では、Vueがキューを更新し、実際の作業を実行します。Vueは、内部で非同期のキューに対して、元のPromise.then、MuttionObserver、set Immediateを使用しようと試みています。実行環境がサポートされていない場合は、set Timeout（fn，0）を使用します。
例えば、vm.someData='new value'を設定すると、コンポーネントはすぐに再レンダリングされません。キューを更新すると、次のイベントサイクル「tick」でコンポーネントが更新されます。多くの場合、このプロセスに関心を持つ必要はありませんが、更新後のDOM状態に基づいて何かをしたいなら、ちょっと手を焼くかもしれません。Vue.jsは通常、開発者に「データ駆動」を使って、DOMに直接接触しないように考えるように励ますが、時々そうしなければならない。
解決策
データの変化後にVueの更新が完了するのを待つために、データの変化後すぐにVue.nextTickを使うことができます。このようなコールバック関数は、DOMの更新が完了すると呼び出されます。
たとえば:


<div id="example">{{message}}</div>

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
})

コンポーネント内でvm.$nextTick()の例示的な方法を使用するのは、グローバルVueが必要ではないので、バックスピン関数のthisは、現在の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) // => '   '
   })
  }
 }
})

$nextTick()はPromiseオブジェクトに戻るので、新しいES 2017 async/await文法を使って同じことができます。


methods: {
 updateMessage: async function () {
  this.message = '   '
  console.log(this.$el.textContent) // => '   '
  await this.$nextTick()
  console.log(this.$el.textContent) // => '   '
 }
}

追加の知識：Vueデータの更新ビューは更新されません。いくつかの解決策を知っている必要があります。
知識が広まる
一構成要素の例では、dataで初期化されたデータだけが応答であり、Vueはオブジェクト属性の追加または削除を検出できず、dataで宣言された属性は応答ではない。
Vueは作成された例において、ルートレベル応答属性を動的に追加することは許されないが、対応する属性をネストされたオブジェクトにUSset法を使用して追加することができる。
配列データの変動は、いくつかの方法で配列を操作し、データを変動させる場合、一部の方法はvueによって監視できない。
push()、pop()、shift()、unshift()、splice()、sort()、reverse()はvueに検出されます。
filter（）、concat（）、slice（）。これらは元の配列を変えませんが、常に新しい配列を返します。非変異法を使用すると、古い配列を新しい配列で置き換えることができます。
vueは以下の変動の配列を検出できません。
1、索引を利用して直接項目を設定する場合、vm.items[indexOfItem]=newValue
2、配列の長さを変更すると、例えば、vm.items.length=newLength
オブジェクトの属性の追加と削除
Vueは初期化例において属性に対してgetter/setter変換プロセスを実行するので、属性はdataオブジェクト上に存在しなければVueを変換できません。
解決策：
Vue.set(object，key，value)メソッドを使って、応答属性を入れ子のオブジェクトに追加します。
Vue.set（vm.someObject，'b'，2）またはthis.$set（this.someObject，'b'，2）（これも大域Vue.set方法の別名である）
非同期更新キュー
最新のプロジェクトの中でこのような情況に出会って、データは第1回得て、同じく誇張して、しかし第2次以降のデータは再度ページをレンダリングする時更新だけあって、リアルタイムで更新することができません。
インターネットで資料を調べてみたら、Vueは異常なステップでDOM更新を実行していることが分かりました。データの変化を観察すると、Vueはキューを開けて、同じイベントサイクルで発生するすべてのデータの変化をバッファリングします。同じウォッチが何度か触発されると、列の中に押し込まれるだけです。
解決策：
データが変化したらすぐにVue.nextTickを使うことができます。このようにコールバック関数はDOM更新が完了すると呼び出されます。たとえば:

$nextTick()はPromiseオブジェクトに戻るので、新しいES 2016 async/await文法を使って同じことができます。

Object.assign方法
Object.assign方法は、エニュメレート・プロパティーのすべての値を1つまたは複数のソースオブジェクトから対象オブジェクトにコピーし、対象オブジェクトに戻すために使用されます。
vm.object=Object.assign({}vm.object、{a:'1'，b:'2')
注：objectはすでに宣言された対象でなければなりません。
vue多層サイクルは、データを動的に変えてレンダリングするのが遅いか、レンダリングしないかです。
データを動的に変更する方法は、最初の行に加えても良いです。
this.$forceUpdate（）;
以上のVUEは、DOMを非同期に更新しました。NxtTickでDOMビューを解決する問題は、小編集がみんなに共有している内容です。参考にしてもらいたいです。どうぞよろしくお願いします。

datagridの使い方を詳しく説明する（重要）

nuxt.jsサービス端末レンダリング中axiosとproxyエージェントの配置操作