Dans un projet auquel j'ai participé récemment, le framework vue.js a été utilisé dans le front-end . Pendant cette période, il y a eu un La fonction nécessite dynamiquement l'ajout de propriétés à un objet lié. Mais dans les applications pratiques, un problème se pose : après l'ajout d'attributs à l'objet, le contenu du composant lié à l'objet ne change pas. Le composant doit être à nouveau actualisé avant que son contenu ne change au contenu modifié.
Au début, je pensais que l'attribut n'avait pas été ajouté avec succès, car à mon avis v-model est lié dans les deux sens et ne sera pas dans un état non mis à jour. Après avoir vérifié la surveillance dans Devtools, j'ai constaté que les attributs spécifiés étaient ajoutés à l'objet correspondant.
Lorsque vous transmettez un objet JavaScript normal dans une instance Vue en tant qu'option data, Vue parcourra toutes les propriétés de cet objet et utilisera Object.defineProperty pour convertir toutes ces propriétés en getter/setter. Object.defineProperty est une fonctionnalité d'ES5 qui ne peut pas être supprimée, c'est pourquoi Vue ne prend pas en charge les navigateurs IE8 et inférieurs.
Chaque instance de composant correspond à une instance watcher, qui enregistre les propriétés des données "touchées" en tant que dépendances pendant le processus de rendu du composant. Plus tard, lorsque le setter de la dépendance est déclenché, l'observateur sera averti, provoquant un nouveau rendu de son composant associé.
En raison des limitations de JavaScript, Vue ne peut pas détecter les modifications apportées aux tableaux et objets. Il existe néanmoins des moyens de contourner ces limitations et de les maintenir réactifs.
Pour l'objet
Vue ne peut pas détecter l'ajout ou la suppression d'une propriété . Étant donné que Vue effectuera une conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet data pour que Vue la convertisse en réactif. Par exemple :
Vue ne permet pas d'ajouter dynamiquement des propriétés réactives au niveau racine aux instances déjà créées. Cependant, vous pouvez ajouter des propriétés réactives aux objets imbriqués à l'aide de la méthode Vue.set(object, propertyName, value). Par exemple, pour :
Parfois, vous devrez peut-être attribuer plusieurs de nouvelles valeurs à une propriété d'objet existante, par exemple en utilisant Object.assign() ou _.extend(). Cependant, les nouvelles propriétés ajoutées à l'objet de cette manière ne déclencheront pas de mise à jour. Dans ce cas, vous devez créer un nouvel objet avec les propriétés de l'objet d'origine et de l'objet que vous souhaitez mélanger.
Il s'agit d'une solution d'affectation d'objets. Après avoir adopté la solution officielle this.$set(object, key, value), l'effet de mise à jour en temps réel est effectivement obtenu. Parallèlement, pour les tableaux et autres situations, vous pouvez consulter les documents officiels restants
Pourquoi cela se produit-il ?
Comme l'a dit le responsable "En raison des limitations de JavaScript, Vue ne peut pas détecter les changements dans les tableaux et objets , mais pourquoi." ? Que va-t-il se passer ?
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Vue] Les objets liés au modèle V ne sont pas mis à jour en temps réel](https://media.beatree.cn/article/image/data.png)
![[Vue] Les objets liés au modèle V ne sont pas mis à jour en temps réel](https://media.beatree.cn/article/image/%E5%85%AC%E4%BC%97%E5%8F%B7QRCode.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
