Problèmes d'affectation entre les tableaux de vues et les objets

Cette fois, je vous présente les problèmes d'affectation de vuearray et object Quelles sont les précautions pour attribuer des valeurs​​à. vue tableaux et objets, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Vue ne peut pas détecter les tableaux modifiés suivants :

Lorsque vous définissez un élément directement à l'aide d'un index, par exemple : vm.items[indexOfItem] = newValue

Lorsque vous modifiez la longueur du tableau, par exemple : vm.items.length = newLength

Lorsque cela est nécessaire dans la première situation, vous pouvez utiliser this.$set(this.arr,index,newVal)

Vue ne peut pas détecter l'ajout ou la suppression de l'objet attribut  :

 Vous pouvez utiliser this.$set(this.person,'age',12)

Lorsque plusieurs objets doivent être ajoutés, <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'})

PS : Vue implémente la copie et la duplication approfondies de tableaux et d'objets

Lorsque des objets sont passés entre des composants, puisque le type référence

de cet objet pointe tous vers une adresse (sauf pour le type de base et null, l'affectation entre les objets pointe uniquement l'adresse vers la même adresse, pas dans le copie vrai sens), comme suit

Tableau :

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

Objet :

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

En effet, le type d'objet est attribué directement et pointe simplement la référence vers la même adresse. La modification de obj entraînera également la modification de obj2

. Ainsi, dans Vue, si plusieurs composants font référence au même objet en tant que données, alors lorsque l'un des composants modifie les données de l'objet, les données des autres objets seront également modifiées simultanément. Si une telle liaison bidirectionnelle est nécessaire, c'est naturellement la meilleure. Mais si vous n'avez pas besoin de cette liaison et que vous souhaitez que les données d'objet de chaque composant soient indépendantes les unes des autres, c'est-à-dire des copies d'objets qui le sont. pas liés les uns aux autres, vous pouvez utiliser les méthodes suivantes pour résoudre

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Comment Yuansheng JS implémente le téléchargement de fichiers asynchrone

JS effectue une comparaison de taille temporelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!