Quel est le principe de vue basé sur les données

Le principe basé sur les données de Vue est le suivant : utiliser le détournement de données combiné au modèle d'éditeur et d'abonné, détourner les setters et getters de chaque propriété via "Object.defineProperty()", publier des messages aux abonnés lorsque les données changent et déclencher la surveillance correspondante. rappels.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quel est le principe basé sur les données de vue

Qu'est-ce qui est basé sur les données

La fonctionnalité basée sur les données est la plus grande fonctionnalité de vue.js. Dans vue.js, ce qu'on appelle basé sur les données signifie que lorsque les données changent, l'interface utilisateur change en conséquence et les développeurs n'ont pas besoin de modifier manuellement le DOM.

Par exemple, lorsque nous cliquons sur un bouton, le texte de l'élément doit être basculé entre oui et non. En jquery, lors de la modification de la page, on suit généralement ce processus. On lie les événements au bouton, puis on obtient l'élément dom object correspondant à la copie, puis on modifie la valeur de copie de l'objet dom en fonction du switch.

Alors, comment vuejs réalise-t-il ce type de collecte de données ?

vue implémente la liaison de données bidirectionnelle principalement en utilisant le détournement de données combiné au modèle éditeur-abonné, en détournant les setters et getters de chaque propriété via Object.defineProperty() et en publiant des messages aux abonnés lorsque les données changent. déclenchant le rappel d'écoute correspondant.

Lorsque vous transmettez un objet Javascript normal à une instance de Vue comme option de données, Vue parcourt ses propriétés et utilise Object.defineProperty pour les convertir en getters/setters. Les getters/setters ne sont pas visibles par l'utilisateur, mais en interne, ils permettent à Vue de suivre les dépendances et de notifier les changements lorsque les propriétés sont accédées et modifiées. La liaison de données bidirectionnelle de

vue utilise MVVM comme entrée de liaison de données, intègre Observer, Compile et Watcher, utilise Observer pour surveiller les modifications de données de son propre modèle et utilise Compile pour analyser et compiler les instructions de modèle (utilisées dans vue Parse {undefined{}}), et enfin utilisez l'observateur pour créer un pont de communication entre l'observateur et Compile afin d'obtenir un effet de liaison bidirectionnelle des modifications de données -> afficher les mises à jour ; afficher les modifications interactives (entrée) -> les modifications du modèle de données.

Comprendre le getter/setter ?

Lors de l'impression des attributs dans l'objet de données sous l'instance Vue, chacun de ses attributs a deux méthodes get et set correspondantes, get est pour l'acquisition de valeur et set est pour l'affectation. we Obj.prop est utilisé pour obtenir et attribuer des valeurs, mais cela pose un problème. Comment puis-je savoir que la valeur de l'objet a changé ? C’est donc au tour du décor d’apparaître. Vous pouvez comprendre get et set comme fonctions. Lorsque nous appelons les propriétés de l'objet, nous entrerons get.property(){...} et déterminerons d'abord si l'objet a cette propriété. Sinon, ajoutez une propriété name. Et attribuez-lui une valeur ; s’il existe un attribut de nom, renvoyez l’attribut de nom. Vous pouvez considérer get comme une fonction qui prend une valeur, et la valeur de retour de la fonction est la valeur qu'elle obtient. Ce qui me semble plus important, c'est l'attribut set. Lors de l'attribution d'une valeur à une instance : à ce moment, il entrera set name(val){...} ; le paramètre formel val est la valeur que j'ai attribuée à l'attribut name ; . Dans cette fonction, vous pouvez faire beaucoup de choses , comme la liaison bidirectionnelle ! Étant donné que chaque modification de cette valeur doit passer par set, elle ne peut pas être modifiée par d'autres méthodes, ce qui équivaut à un écouteur universel. Le prototype d'objet ES5 possède deux nouveaux attributs __defineGetter__ et __defineSetter__, qui sont spécifiquement utilisés pour lier get et set à des objets. Il est recommandé d'utiliser la méthode suivante, car elle est écrite sur le prototype, elle peut donc être héritée et réutilisée.

【Recommandation associée : "Tutoriel vue.js"】

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!