Comment comprendre le pilote de données vuejs

Dans vuejs, piloté par 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, en termes simples, cela modifie le DOM en contrôlant les modifications des données, de sorte que la vue soit modifiée. (Le contenu du DOM change à mesure que les données changent.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

One : Qu'est-ce que Vue et comment comprendre Vue

Vue est un framework basé sur la page basée sur les données du mode MVVM, qui lie les données à la vue. Il s'agit d'une technologie permettant de mettre en œuvre des applications d'une seule page.

Plusieurs fonctionnalités majeures résumées :

• Simple

• Léger

• Rapide

• Piloté par les données

• Module convivial

• Componentization

vue s'appuie sur le pilote de données deux- La liaison de cette manière nous permet de développer plus facilement des pages et les développeurs n'ont pas besoin de modifier manuellement le DOM. Vue rend tout plus facile grâce à la liaison de données bidirectionnelle. Sa liaison bidirectionnelle basée sur les données est implémentée via l'ensemble de données et obtient les principes de fonction définis par Object.defineProperty().

2. Le développement basé sur les composants rend le projet plus évolutif et portable, et le code est plus réutilisable.

3. Expérience d'application sur une seule page, les composants locaux mettent à jour l'interface pour rendre l'expérience utilisateur plus rapide et gagner du temps.

Une application monopage, également connue sous le nom de SPA, limite toutes les activités à une page Web et ne charge le HTML, JavaScript et CSS correspondants que lorsque la page Web est initialisée. Une fois le chargement terminé, la page ne se recharge plus ou ne saute plus. Seuls les composants ou modules à l'intérieur interagissent et passent par l'API de hachage ou d'historique, et extraient les données via ajax pour implémenter la fonction de réponse. L'application entière n'est donc qu'un seul code HTML. s'appelle Page unique !

4. Le code js a des normes invisibles et le code développé grâce au travail d'équipe est plus lisible.

2 : Quel est le principe de Vue data-driven (liaison de données bidirectionnelle) ?

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. rappel d’écoute correspondant. Lorsque vous transmettez un objet Javascript simple à une instance de Vue comme option de données, Vue parcourt ses propriétés et les convertit en getters/setters à l'aide de Object.defineProperty. 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 pour la liaison de données, intégrant Observer, Compile et Watcher. Elle utilise Observer pour surveiller les modifications de données de son propre modèle et utilise Compile pour analyser et compiler les instructions du modèle (qui est utilisé). dans vue Parse {{}}), et enfin utilisez watcher pour construire un pont de communication entre l'observateur et Compile afin d'obtenir un effet de liaison bidirectionnel de changement de données -> mise à jour de vue vue de changement interactif (entrée) -> changement de 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. value et L'affectation utilise obj.prop, mais il y a un problème avec cela. 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 en tant que 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 un attribut de nom 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-là, 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. Les choses ont changé, 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écialement 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.

Trois : framework MVVM

Le pilote de données de Vue.js est implémenté via le framework MVVM. Le framework MVVM contient principalement trois parties : modèle, vue et viewmodel.

• Model : fait référence à la partie data, qui correspond à l'objet javascript sur le front-end

• View : fait référence à la partie view, qui correspond au dom sur le front-end. Viewmodel : est le middleware. qui connecte la vue et les données. Communication

• Data (Model) et View (View) ne peuvent pas communiquer directement, mais doivent communiquer entre eux via ViewModel. Lorsque les données changent, le viewModel peut surveiller le changement et notifier la vue pour apporter des modifications en temps opportun. De même, lorsqu'un événement est déclenché sur la page, viewMOdel peut également écouter l'événement et demander au modèle de répondre. Viewmodel est équivalent à un observateur, surveillant les actions des deux parties et informant l'autre partie à temps pour effectuer les opérations correspondantes.

Recommandations associées : "

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!