Vue の応答データが応答しない

Vue.js で開発する場合、最も一般的に使用される機能は、応答性の高いデータ バインディングです。この機能を使用すると、開発者はデータを宣言してバインドすることで、ビューとデータ間の自動同期を実現できます。ただし、場合によっては、Vue の応答データが応答しない、つまりデータを変更してもビューが更新されないという問題が発生することがあります。これはよくある問題です。次に、この問題の考えられる原因と解決策について説明します。

1. データ型はリアクティブをサポートしていません

Vue.js は、データの初期化時に存在するプロパティのみを検出できます。したがって、Map、Set、Symbol、およびこのコンポーネントまたは親コンポーネントの小道具として渡される他のタイプのオブジェクトなど、非応答性のデータ型が存在する場合、これらのデータ型が応答性の更新をトリガーする方法はありません。この場合、更新を手動でトリガーする必要があります。新しい応答プロパティを手動で設定するには、Vue.set メソッドまたは Vm.$set メソッドを使用します。例:

Vue.set(this.obj, 'propertyName', newValue)

または

this.$set(this.obj, 'propertyName', newValue)

2. Vue は、新しいプロパティ/要素を追加する場合には使用されません。オブジェクト、配列 .set、または this.$set

Vue.js で開発する場合、通常は Object.defineProperty メソッドを使用してデータの変更をリッスンし、ビューがプロパティが変更されると再レンダリングされます。 Vue.js はそれらの変更を自動的に追跡できないため、オブジェクトまたは配列に新しいプロパティまたは要素を追加する際に問題が発生します。したがって、オブジェクトに新しい属性を追加するか、配列に新しい要素を追加する場合は、Vue.set メソッドまたは this.$set メソッドを使用して属性または要素を手動で追加する必要があります。

たとえば、data という名前の配列があり、新しい要素を追加する必要があります:

this.data.push(newElement); // 这种方式添加的元素不会响应式更新
或者
this.data[this.data.length] = newElement; // 该方式同样不会响应式更新

正しい方法は、this.$set または Vue.set を使用することです:

this.$set(this.data, this.data.length, newElement);
或者
Vue.set(this.data, this.data.length, newElement);

同様に、オブジェクトに新しいプロパティを追加することも同じです。

3. オブジェクトまたは配列は Object.freeze() メソッドを使用します

オブジェクトまたは配列が Object.freeze() メソッドによってフリーズされている場合、Vue.js は次のことを行うことができませんバインドプロパティを変更します。したがって、これらのプロパティを変更する必要がある場合は、手動でフリーズを解除してプロパティ/要素を追加する必要があります。例:

let obj = Object.freeze( {
  key: 'value'
});
let newValue = 'new value';
obj.key = newValue; // 这种方式添加的属性不会响应式更新

let newObj = {[...obj]} // 这样也不会响应式更新

let unfrozenObj = {...obj}; // 解冻后再添加属性才会触发更新
unfrozenObj.key = newValue;

4. 同じオブジェクトのプロパティを頻繁に切り替える

同一オブジェクト上の場合 属性の切り替えが頻繁に行われると、Vue.js が応答しなくなる場合があります。たとえば、bool 型属性を切り替える場合は、まず属性の値を手動で false に設定し、次に次のように true に設定する必要があります。

this.boolAttr = false;
this.boolAttr = true;

5. オブジェクトのネスト レベルの数または配列が深すぎる

Vue.js では、応答性の最大の深さは 10 レベルです。オブジェクトまたは配列のネストされたレイヤーの数が深すぎる場合、Vue.js はそのレイヤーを追跡できません。内部プロパティが変更されます。現時点では、計算されたプロパティとメソッドを使用してこの問題を解決することを検討できます。例:

data: {
  deepChild: {
    deepChild1: {
      ...
    }
  }
},

computed: {
  deepChildProp: function() {
    return this.deepChild.deepChild1....;
  }
},

要約すると、上記は Vue 応答データが応答しないいくつかの状況です。同様の問題に対処する場合、問題の原因を事前に特定し、対応する解決策を選択する必要があります。 Vue.js が提供するツールを使用して、進行中の問題を診断したり、予期しない更新を手動で実装したり、計算されたプロパティやメソッドのデータを操作したりできます。 Vue.js を使用する場合、美しく効率的なコードを作成するには、Vue.js の応答性の高いデータ バインディングの原則を完全に理解する必要があります。

以上がVue の応答データが応答しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。