vue 配列とオブジェクト間の割り当ての問題

今回は、vue配列とオブジェクトの代入の問題について説明します。vue配列とオブジェクトの代入の注意事項は何ですか?実際のケースを見てみましょう。

Vue は次の変更された配列を検出できません:

インデックスを使用して項目を直接設定する場合、たとえば: vm.items[indexOfItem] = newValue

配列の長さを変更する場合、たとえば: vm.items.length = newLength

最初の状況が必要な場合は、this.$set(this.arr,index,newVal)

を使用できます Vue はオブジェクト プロパティ の追加または削除を検出できません:

使えるthis.$set(this.person,'age',12)

複数のオブジェクトを追加する必要がある場合は、<code><a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.assign({},this.person,{age:12,name:'wee'})Object

.assign({},this.person,{age:12,name:'wee'})

追記: Vue は配列とオブジェクトのディープコピーとレプリケーションを実装します

オブジェクトがコンポーネント間で受け渡されるとき、このオブジェクトの reference

type はすべてアドレスを指すため (基本的な型と null を除き、オブジェクト間の割り当てでは、アドレスは真のコピーではなく、同じものを指すだけです)。以下の通り

配列:

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

オブジェクト:

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了，
alert(obj.a); // 20，obj的a跟着改变

これは、オブジェクトタイプが直接割り当てられており、obj を変更すると obj2 も変更されるためです

。 したがって、Vue では、複数のコンポーネントが同じオブジェクトをデータとして参照している場合、コンポーネントの 1 つがオブジェクト データを変更すると、他のオブジェクトのデータも同時に変更されます。このような双方向バインディングが必要な場合は、当然これが最適ですが、このバインディングが不要で、各コンポーネントのオブジェクト データを互いに独立させたい場合、つまり、オブジェクトのコピーが必要な場合には、相互に関連性はありません。次の方法を使用できます。

computed: { 
   data: function () { 
     var obj={}; 
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
     return obj 
  } 
 }

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

時間サイズの比較のために Yuansheng JS で非同期ファイルのアップロードを実装する方法

js

🎜

以上がvue 配列とオブジェクト間の割り当ての問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。