Alors, qu'est-ce que Vue.set?

La réactivité dans VueJS est l’une des fonctionnalités essentielles que tout développeur doit comprendre et maîtriser pour exploiter pleinement la puissance du framework. Vue.set est un appel d'API qui s'intégrera bien dans votre ceinture d'outils pour la création d'applications plus puissantes. Allons-y et apprenons-nous ensemble.

Parler de Vue.set parle de réactivité, préparez-vous donc à une théorie sur celui-ci. Cependant, comme toujours, il n’est pas nécessaire que ce soit quelque chose de dur ou d’ennuyeux. Trouvez vos avocats et vos chips, fabriquez du guacamole et plongeons-y.

Données et réactivité

Chaque fois que vous créez une fonction de propriété data () dans un composant Vue et restituez l'objet, Vue fait beaucoup de choses en coulisse pour tout connecter et rendre réactif votre composant.

 export   default   {
   data  ()   {19659007] {19659007} 
    retour   {
     rouge :   'chaude' 
     chili :   'poivrons' 
   } 
  } 
} 

La première chose que fera Vue avec ces superbes données RHCP impressionnantes, est de parcourir chacun des . ] propriétés de retournent un objet {} et créent un getter unique et un setter pour chaque objet. La réalité de cette situation dépasse le cadre de cet article, mais Vue Mastery propose une très belle vidéo expliquant cela en détail.

Le but de leur création est tel que lorsque vous y accédez les propriétés dans votre code, en faisant this.red par exemple, ou en les définissant avec this.red = "plus chaud" vous appelez en réalité ces getters et setters créés par Vue pour vous.

À l’intérieur de ce pays magique de SETGET, Vue connecte les propriétés de votre ordinateur, vos observateurs, vos accessoires, vos données, etc. pour devenir réactif . En termes très simples, une fonction est appelée qui met à jour le shebang entier chaque fois que le poseur est changé.

The Pitfall

Awesome! C'est ce que nous aimons chez Vue, non? Sa réactivité étonnante et sa puissance sous le capot.

Modifions un peu nos données pour voir ce qui se passe lorsque nous essayons de travailler avec des données dynamiques.

 data  () [) [19659007] {
   return   {
    membres :   {} 
  } 
} 

D'accord, rien d'extraordinaire jusqu'à présent. Nous avons une propriété members de nos données dans laquelle nous voulons ajouter des informations sur les membres de la bande. A titre d'exemple, ajoutons une méthode qui prétend extraire des informations d'un appel HTTP distant, qui nous restitue un objet JSON avec les informations de bande.

 data  () [) [19659007] {
   return   {
    membres :   {} 
  } 
} 
Méthodes :   {
   getMembers  ()   {
    const  newMember  =   {
     nom :   'Flea' 
     instrument :   'Basse' 
     baeLevel :   'A ++' 
   } ;  

   
  } 
} 

Hm. Ok, alors, en regardant cet exemple, arrêtons-nous et réfléchissons. Il existe de nombreuses façons de résoudre ce dilemme actuel – comment pouvons-nous ajouter cet objet newMember à notre propriété actuelle membres ?

Peut-être pensez-vous, passons aux membres dans un tableau et le poussent . Bien sûr, mais c’est tricher, c’est parce que cela brise mon exemple soigneusement construit que je ne me suis pas contenté de maquiller en tapant ceci.

Dans ce scénario, nous avons BESOIN d’avoir des membres . Ok, c’est simple – vous diriez, ajoutons simplement une nouvelle propriété à la propriété members c’est un objet après tout. En fait, faisons en sorte que le nom du membre devienne le nom de la propriété.

 getMembers  ()   {
    const  newMember  =   {
     nom :   'Flea' 
     instrument :   'Basse' 
     baeLevel :   'A ++'  
   } ;  

    this .  membres  [ newMember .  nom  ]   =  newMember ; 
  } 

Lok'tar Ogar!

Sauf que non, car A. n'est pas Orgrimmar et B. nous maintenant un problème.

Si vous exécutez ce code sur votre navigateur et le testez maintenant, vous verrez que vous insérez ces nouvelles données dans les données des membres mais ce changement a pour effet l'état du composant ne rendra en réalité aucune de vos applications.

Si vous utilisez ces données uniquement pour un calcul ou pour un type de stockage interne, cette opération n'aura aucune incidence sur votre application. Cependant, et c’est pourtant un énorme problème, si vous utilisez ces données de manière réactive sur votre application pour afficher des informations sur votre page, ou pour un rendu conditionnel avec v-if ou v-else alors les choses vont devenir géniales.

Utiliser réellement Vue.set

Alors maintenant que nous comprenons d’où vient le problème, nous pouvons savoir quelle est la solution appropriée. Permettez-moi de vous présenter Vue.set .

Vue.set est un outil qui nous permet d'ajouter une nouvelle propriété à un objet déjà réactif et qui s'assure que nouvelle propriété est également réactif. Cela résout complètement le problème que nous avons rencontré dans l'autre exemple, car lorsque notre nouvelle propriété située sur members sera prête, elle sera automatiquement connectée au système de réactivité de Vue, avec tous les getters / setters et Vue-magic dans les coulisses.

Une petite note est toutefois nécessaire pour comprendre en quoi cela affecte les tableaux. Jusqu'ici, nous n'avons vraiment joué qu'avec les objets, qui sont très faciles à comprendre. Nouveau prop? Ajoutez-le avec Vue.set si vous voulez qu'il soit réactif. Simple.

Pour reprendre notre exemple, changeons les choses pour utiliser plutôt Vue.set .

 getMembers  ()   {
    const  newMember  =   {
     nom :   'Flea' 
     instrument :   'Basse' 
     Niveau de référence :   'A ++' 
   } ;  

   
      ceci . . [1945912]. . . . membres  newMember .  name  newMember ) ; 
  } 

Ce bit est nouveau – . $ set (this.members, newMember.name, newMember); .

Je souhaite mentionner deux éléments pour ce code. Je vous ai dit jusqu’à présent que Vue.set était notre façon de faire les choses, mais maintenant, je me sers de de ce. $ Set . Mais ne craignez rien – il ne s'agit que d'un pseudonyme, il se comportera donc exactement de la même manière. La chose intéressante est que vous ne devez pas importer Vue à l'intérieur de vos composants pour l'utiliser.

La deuxième chose que je veux noter est la syntaxe de cette fonction. Il faut trois paramètres.

L'un est le tableau ou que nous allons modifier (dans le cas présent this.members ).

Un deuxième paramètre qui pointe vers la propriété de la clé ou de la clé du premier objet / tableau que nous avons adopté (donc newMember.name car nous souhaitons qu'il soit dynamique) .

Et enfin un troisième paramètre qui est la valeur que nous voulons y définir. (Dans notre cas, newMember ).

          this .  membres  [ newMember .  nom  ]   =.  newMember ; 

 ce .  $  ensemble  ( ce .  membres  nouveau [Membre]. ].  name  newMember ) ; 

(PS: mes compétences ASCII ne sont pas à vendre. ^)

Mais qu’en est-il de la réactivité des matrices?

Lorsque nous créons un tableau à l'intérieur de l'état initial, Vue le configure pour qu'il soit réactif pour nous. Cependant, Vue ne peut actuellement pas détecter lorsque vous affectez directement une valeur à l'aide d'un index. Par exemple, si nous faisions ceci:

 this .  membersArray  [ 3 ]   =  myNewValue ; 

Then Vue ne sera pas en mesure de détecter ce changement, et donc il ne serait pas réactif. N'oubliez pas que si vous modifiez des tableaux comportant des opérations telles que pop splice ou push ces opérations vont déclencher une réactivité sur les tableaux, ce qui permet de Utilisez-les en toute sécurité.

Dans le cas où vous devez définir directement une valeur d'indice, nous avons Vue.set pour nous aider. Voyons comment cela ressemblerait à notre exemple précédent.

 ceci .  $  set  ( ce .  membersArray   3  myNewValue ) 

Si vous souhaitez en savoir plus sur toutes les mises en garde relatives à la réactivité, consultez ce lien vers la documentation officielle .

Bonus

L'équipe principale de Vue travaille actuellement sur Vue 3.0 et a récemment annoncé de nombreux changements à venir dans le système de réactivité qui faciliteront notre vie en tant que développeurs.

Tout cela est susceptible de changer au moment d'écrire ces lignes, mais la Selon la rumeur, ces mises en garde ne seront plus un problème. En d'autres termes, dans Vue 3.0, vous pourrez oublier d'oublier complètement ces cas extrêmes, à l'exception de ces pauvres âmes qui doivent encore cibler certains anciens navigateurs qui ne prendront pas totalement en charge le nouveau système de réactivité.

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes applications Web? Tout commence avec Kendo UI – la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement Kendo UI