Les données réactives Vue ne répondent pas

Lors du développement avec Vue.js, la fonctionnalité la plus couramment utilisée est sa liaison de données réactive. Cette fonctionnalité permet aux développeurs de réaliser une synchronisation automatique entre les vues et les données en déclarant et en liant les données. Mais parfois, nous pouvons rencontrer un problème où les données réactives de Vue ne répondent pas, ce qui signifie que nous modifions les données, mais que la vue n'est pas mise à jour. Il s’agit d’un problème courant. Discutons ensuite des causes possibles et des solutions à ce problème.

1. Le type de données ne prend pas en charge la réactivité

Vue.js ne peut détecter que les propriétés qui existent lorsque les données sont initialisées. Par conséquent, s'il existe des types de données non réactifs, tels que Map, Set, Symbol et d'autres types d'objets transmis en tant qu'accessoires de ce composant ou composant parent, ces types de données n'ont aucun moyen de déclencher des mises à jour réactives. Dans ce cas, la mise à jour doit être déclenchée manuellement. Utilisez la méthode Vue.set ou Vm.$set pour définir manuellement une nouvelle propriété de réponse, par exemple :

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

ou

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

2. Lors de l'ajout d'une nouvelle propriété/élément à un objet ou un tableau, Vue.set ou this.$ set n'est pas utilisé

Nous savons que lors du développement avec Vue.js, nous utilisons généralement la méthode Object.defineProperty pour écouter les modifications de données, afin que la vue puisse être restituée lorsque les propriétés changent. Il y aura des problèmes avec l'ajout de nouvelles propriétés ou éléments aux objets ou aux tableaux, car Vue.js ne peut pas suivre automatiquement leurs modifications. Par conséquent, si nous ajoutons un nouvel attribut à un objet ou ajoutons un nouvel élément à un tableau, nous devons utiliser la méthode Vue.set ou this.$set pour ajouter manuellement l'attribut ou l'élément.

Par exemple, nous avons un tableau nommé data et devons ajouter un nouvel élément :

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

La bonne façon est d'utiliser this.$set ou Vue.set :

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

De même, il en va de même pour l'ajout de nouvelles propriétés aux objets de.

3. L'objet ou le tableau utilise la méthode Object.freeze()

Si l'objet ou le tableau est gelé par la méthode Object.freeze(), alors Vue.js ne peut pas modifier les propriétés liées. Ainsi, si vous devez modifier ces propriétés, vous devez débloquer et ajouter manuellement des propriétés/éléments, par exemple :

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

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

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

4. Changement fréquent de propriétés sur le même objet

Lorsque vous changez fréquemment de propriétés sur le même objet, Vue.js peut devenir insensible à une situation de panne. Par exemple, lorsque vous changez un attribut de type booléen, vous devez d'abord définir manuellement la valeur de l'attribut sur false, puis la définir sur true, par exemple :

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

5. Le niveau d'imbrication de l'objet ou du tableau est trop profond

in Dans Vue.js, la profondeur de réactivité maximale est de 10 niveaux. Si le niveau d'imbrication d'un objet ou d'un tableau est trop profond, Vue.js ne pourra pas suivre les modifications de ses propriétés internes. À l'heure actuelle, nous pouvons envisager d'utiliser des propriétés et des méthodes calculées pour résoudre ce problème :

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

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

Pour résumer, voici plusieurs situations dans lesquelles les données réactives Vue ne répondent pas. Lorsque nous traitons de problèmes similaires, nous devons déterminer à l’avance la cause du problème, puis choisir la solution correspondante. Nous pouvons utiliser les outils fournis par Vue.js pour diagnostiquer les problèmes en cours, ou implémenter manuellement des mises à jour inattendues ou manipuler les données dans les propriétés et méthodes calculées. Lorsque nous utilisons Vue.js, nous devons bien comprendre ses principes de liaison de données réactives afin d'écrire un code beau et efficace.

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!