Maison > Article > interface Web > 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
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 suitTableau :
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!