Vueは応答性の原則に深く入り込んでいます

目次

1.変更を追跡する方法:

2.変更を検出するための注意オプション:

3つ目は、レスポンシブプロパティを宣言することです。

4つの非同期更新キュー:


1.変更を追跡する方法:

1.共通のJSオブジェクトをデータオプションとしてVueインスタンスに渡すと、Vueはこのオブジェクトのすべてのプロパティをトラバースします。そして、Object.definePropertyを使用して、これらすべてのプロパティをgetter / setterに変換します

2. getter / setterは、Vueが依存関係追跡し、プロパティがアクセスおよび変更されたときに変更を通知できるようにします。

3.各コンポーネントインスタンスはウォッチャーインスタンスに対応し、「タッチされた」データプロパティは、コンポーネントのレンダリングプロセス中に依存関係として記録されます。依存セッターがトリガーされるとウォッチャーに通知されるため、関連するコンポーネントが再レンダリングされます。

2.変更を検出するための注意オプション:

1. Vueがオブジェクトと配列の変化を検出することはできません。

2. Vueでは、フォローレベルのレスポンシブプロパティを動的に追加することはできません。

しかし、あなたは使うことができます

Vue.set(vm.someObject,"b",2); this.$set(this.someObject,"b",2);

3.既存のオブジェクトに複数の新しいプロパティを割り当てます。元のオブジェクトと混合するオブジェクトのpeopertyを使用して新しいオブジェクトを作成します。

this.someObject = Object.assign({},this.someObject,{a:1,b:2})

4.Vueはアレイの変更を検出できません。

(1)インデックスを使用して配列値を設定します。

vm.items[indexOfItem] = new Value;

(2)配列の長さを変更します。

vm.items.length = newLength;

最初のタイプの問題を解決します。

vm.set(vm.items,indexOfItem,newValue);

vm.items.splice(infrxOfItem,1,newValue)

2番目のタイプの問題を解決します。

vm.items.splice(newLength);

3つ目は、レスポンシブプロパティを宣言することです。

 Vueでは、ルートレベルの応答プロパティを動的に追加することはできません。インスタンスを初期化する前に、すべてのルートレベルのリアクティブプロパティを宣言する必要があります。

4つの非同期更新キュー:

1. Vueは、DOMの更新時に非同期で実行されます。

2.データの変更をリッスンしている限り、Vueはキューを開き、同じイベントループで発生するすべてのデータの変更をバッファリングします。

3.同じウォッチャーが複数回トリガーされ、キューにプッシュされるのは1回だけです。

4. Vueは、非同期キューにネイティブのPromise.then、MutationObserver、およびsetImmediate setTimeOut(fn、0)を内部的に使用しようとします。

 


注:参考資料:Vueの公式ウェブサイト。 

 

 

 

おすすめ

転載: blog.csdn.net/weixin_43690348/article/details/112831957