Quelle est la raison pour laquelle vue ne peut pas écouter l'objet

Avant-propos

Dans le développement de Vue.js, la liaison de données bidirectionnelle est souvent utilisée, ce qui est l'une des fonctions principales de Vue.js. Mais parfois, vous constatez que lorsque vous créez un objet sur une instance de Vue et que vous ajoutez ensuite une nouvelle propriété à l'objet, Vue ne détecte pas le changement de propriété. Cet article explorera cette question en détail.

Cet article explorera les questions suivantes :

1. Dans quelles circonstances un objet Vue peut-il écouter les changements de propriété ?
2. Dans quelles circonstances Vue peut-il ne pas détecter les changements dans les objets ?
3. Comment Vue résout-il le problème de l'incapacité d'écouter les objets ?

Dans quelles circonstances un objet Vue peut-il détecter des changements de propriété ?

Dans Vue.js, seules les propriétés définies lors de l'instanciation d'un objet Vue sont réactives. Par exemple :

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

Si nous définissons dès le début un type de données complexe tel qu'un objet ou un tableau dans l'instance Vue, les propriétés de l'objet ou les éléments du tableau deviendront automatiquement des propriétés réactives.

Par exemple :

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

Étant donné que Vue.js utilisera la méthode Object.defineProperty() sur l'instance de Vue pour convertir les propriétés de l'objet en getters/setters, les modifications dans les propriétés de l'objet peuvent être détectées.

Dans quelles circonstances Vue peut-il ne pas détecter les changements dans les objets ?

Ci-dessus, nous avons mentionné que lorsqu'un type de données complexe est défini dans une instance Vue, les propriétés de l'objet ou les éléments du tableau deviendront automatiquement des propriétés réactives. Mais lorsque vous ajoutez une nouvelle propriété à un objet, Vue ne peut pas écouter les modifications apportées à cette propriété.

Par exemple :

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

Vue ne peut pas écouter les modifications dans les propriétés nouvellement ajoutées car Vue.js n'écoute que les propriétés déjà définies lors de l'instanciation de l'objet Vue, pas les propriétés ajoutées ultérieurement. Autrement dit, lorsque vous ajoutez une nouvelle propriété au moment de l'exécution, vous devez utiliser la méthode Vue.set() pour ajouter une nouvelle propriété et la rendre réactive. Par exemple :

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

Comment Vue résout-il le problème de l'incapacité d'écouter les objets ?

En plus d'utiliser la méthode Vue.set() pour ajouter une nouvelle propriété et la rendre réactive, il existe d'autres moyens de résoudre le problème de l'impossibilité d'écouter les objets.

1. Définissez toutes les propriétés dans l'instanciation Vue

La meilleure façon d'éviter d'ajouter de nouvelles propriétés après la création de l'instance Vue est de définir toutes les propriétés dans l'instanciation Vue. Par exemple :

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

2. Utilisez la méthode Vue.observable()

La méthode Vue.observable() prend l'objet comme réactif en tant que paramètre et renvoie un objet avec une fonctionnalité réactive. (Notez que cette méthode est nouvelle dans la version Vue 2.6.0). Par exemple :

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

Conclusion

Dans le développement de Vue.js, la fonction de liaison de données bidirectionnelle est très importante. Cependant, lorsque vous utilisez des objets Vue, vous devez faire attention aux points suivants :

1. Seules les propriétés définies lors de l'instanciation d'un objet Vue sont réactives.
2. Lorsque vous ajoutez une nouvelle propriété à un objet, Vue ne peut pas écouter les modifications apportées à la propriété.
3. Si vous devez ajouter une nouvelle propriété et la rendre réactive, utilisez la méthode Vue.set().
4. Les versions plus récentes de Vue, telles que Vue 2.6.0, peuvent utiliser la méthode Vue.observable() pour convertir un objet en objet réactif.

Lorsque vous pourrez utiliser correctement les attributs réactifs, Vue.js vous apportera un code simple et compact, une interface utilisateur intuitive et une meilleure expérience utilisateur.

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!