Vueのレスポンシブシステムは、プロキシまたはゲッター/セッターを介してオブジェクト屬性の変更を追跡しますが、新しいオブジェクト屬性は、vue.set（）またはreactive（）でラップして更新をトリガーする必要があります。配列の場合、Vueはプッシュ、スプライス、その他のバリアントメソッドを書き直してレスポンシブアップデートを?qū)g現(xiàn)します。インデックスを介して要素を直接変更するか、長さの屬性を変更しても更新はトリガーされません。 bueオブジェクトの場合、Vueは屬性を初期化するときに応答性の式に変換します。その後追加された新しい屬性は、自動的に応答しません。 vue.set（）（vue 2）を使用するか、replainive（）によって作成されたオブジェクトに値を割り當(dāng)てる必要があります。 Arrayの場合、VUEトリガープッシュ、スプライスなどの突然変異法をラッピングすることにより更新をトリガーしますが、直接インデックスの割り當(dāng)てや変更の長さは検出されません。スプライスまたはvue.set（）を使用してそれらを処理する必要があります。 vue VUE 3では、Reactive（）を使用して作成された配列は、インデックス割り當(dāng)てを通じて応答性を維持できますが、潛在的な問題を回避するために推奨操作に従うことをお勧めします。 curtion元の配列を直接変更する代わりに、突然変異法を使用するか、REFに再割り當(dāng)てします。

Vueの反応性システムは、配列とオブジェクトでは異なる機能を備えています。違いを理解することで、アプリが予想どおりに更新されない場合の混亂を避けることができます。

Vueは、リアクティブオブジェクトをプロキシでラップします（またはVUE 2のゲッター/セッターを定義します）

reactive()またはref()を使用してコンポーネントまたはリアクティブオブジェクトを作成すると、Vueは変更を追跡できることを確認します。普通のJavaScriptオブジェクトの場合、Vueは各プロパティを通り抜けてGetter/Setters （VUE 2）に変換するか、プロキシ（VUE 3）を使用します。これにより、プロパティにアクセスまたは変更されたときにVUEがわかります。

しかし、キャッチがあります：
オブジェクトがリアクティブになった後に新しいキーを追加した場合、 Vue.set() （VUE 2）を使用したり、 reactiveオブジェクト（VUE 3）に割り當(dāng)てない限り、VUEはその新しいキーを自動的にリアクティブにしません。

したがって、これを行う場合：

データ（） {
  戻る {
    ユーザー：{名前：「アリス」}
  }
}

そして後で：

 this.user.age = 25;

VUEは、vue 2のthis.$set(this.user, 'age', 25) reactive() user.age userをトリガーしません。

配列には突然変異法が処理されます

vueはarr[0] = newValueのような直接インデックスの変更を検出できず、配列の長さを直接変更したときに検出することもできません（ arr.length = 0 ）。したがって、それらに依存する代わりに、vueは.push() 、. .pop() 、. .shift() 、. .unshift() 、. .splice() 、. .sort() 、および.reverse()などのアレイ変異法をラップします。

言い換えると：

• ?これらは更新をトリガーします：
  • arr.push('new item')
  • arr.splice(1, 1)
• ?これらは次のとおりです。
  • arr[0] = 'changed'
  • arr.length = 0

インデックスの割り當(dāng)てを処理するには、 .splice()を使用するか、 Vue.set() / this.$set()を使用して割り當(dāng)てます。

 this。$ set（arr、index、newValue）;

VUE 3では、プロキシを使用するため、これについてはそれほど心配する必要はありません。インデックスで割り當(dāng)てるか、長さを変更することは、配列がreactive()オブジェクトの一部である限り、反応的です。

非反応性操作に注意してください

いくつかのパターンは、箱から出してうまくいかないだけです：

• 作成後に新しいオブジェクトキーを追加します（ $setを使用しない限り）
• インデックスによる配列アイテムの変更（VUE 2に$setなし）
• アレイ全體を新しいものに置き換える（ arr = [...arr, newItem]など） - .push()を使用しているか、 refに再割り當(dāng)てしない限り、これは反応性を破壊します

また、深くネストされたデータがある場合、Vueは依存関係を再帰的に追跡します。しかし、繰り返しますが、深いオブジェクトまたはアレイを完全に交換している場合、Vueは変更を拾う必要があります。追跡されたコンテキストの外で狀態(tài)を変異させないようにしてください（適切なラッピングなしでタイムアウト內(nèi)など）。

それでは、Vueの反応性システムは、配列とオブジェクト內(nèi)の変化をどのように処理しますか？ゲッター/セッターまたはプロキシを使用してアクセスと突然変異を追跡しますが、一部の操作は自動的に検出されません。特にオブジェクトキーの追加と直接配列インデックスの割り當(dāng)て。 $setを使用するなど、Vueに優(yōu)しいパターンに従うか、アレイの突然変異方法に固執(zhí)する必要があります。

基本的にそれだけです。

以上がVueの反応性システムは、配列とオブジェクト內(nèi)の変化をどのように処理しますか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。