Principe des données réactives Vue et différence entre Vue.set et Vue.$set

Vue est un framework de développement populaire dans le domaine front-end actuel. L'un de ses principaux mécanismes pouvant déclencher des mises à jour de vues via la modification des données est les données réactives. Cet article approfondira les principes des données réactives de Vue et explorera les différences entre Vue.set et Vue.$set.

1. Principe des données réactives de Vue

Vue va d'abord détourner la source de données, pour définir la source de données, il suffit de remplir les trois conditions suivantes : l'objet n'est pas vide, l'objet n'est pas un objet figé ou scellé, et l'objet n'est pas lui-même une instance de Vue. Lorsque l'objet requis remplit les conditions, Vue ajoutera une instance Observe à l'objet. L'instance Observe ajoutera une instance Dep à chaque propriété de l'objet. Lorsque la valeur de la propriété est un objet, l'instance Dep de la propriété sera la sienne. Instance Dep. Ajoutez une instance Dep pour chaque valeur. Cela permet la liaison des propriétés.

Lors de la modification des données dans l'instance Vue, Vue interceptera les opérations de lecture et d'écriture des données via des getters et des setters, déclenchant ainsi la mise à jour de la valeur de l'attribut. L'opération setter notifiera l'instance Dep à laquelle appartient l'attribut. effectuer des mises à jour de notification, déclenchant ainsi des mises à jour de vue. C'est ainsi que Vue implémente des données réactives.

2. La différence entre Vue.set et Vue.$set

Dans Vue, nous modifions souvent les données dans data et les lions à la vue via v-model, de sorte que lors de la modification des données, Vue puisse automatiquement mettre à jour la vue. . Mais lors de la modification des données d'objet, nous devons utiliser la méthode Vue.set ou Vue.$set fournie par Vue pour obtenir des mises à jour de données réactives.

L'utilisation de Vue.set et Vue.$set est cohérente. La cible de Vue.set(target, key, value) est l'objet que vous souhaitez modifier, key est l'objet en tant que nom d'attribut et value est la valeur de l'attribut. Lors de l'utilisation de Vue.set, Vue ajoutera un nouvel attribut sur l'objet, nommé key et dont la valeur est value.

Vue.$set(target, key, value) est également utilisé pour modifier la valeur d'attribut d'un objet, mais la différence entre Vue.$set et Vue.set est que Vue.$set déterminera si l'objet est réactif . Si Non réactif, Vue.$set convertira l'objet en un objet réactif. Cela garantit que l'objet peut déclencher normalement des mises à jour de vue.

Il est à noter que lorsque l'on modifie les données de l'objet, si on utilise directement obj.property = value pour les modifier, Vue ne détectera pas le changement de ces données et ne déclenchera pas de mise à jour de la vue. Par conséquent, lorsque vous modifiez des données d'un type d'objet, veillez à utiliser la méthode Vue.set ou Vue.$set pour ce faire.

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!