vue 配列とオブジェクト間の割り当ての問題-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-16 17:36:47

オリジナル

6233 人が閲覧しました

今回は、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="//m.sbmmt.com/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 で非同期ファイルのアップロードを実装する方法

🎜

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