Utiliser Vue pour implémenter les principes sous-jacents (tutoriel détaillé)

Je vais vous donner un résumé des points de connaissances sur les principes de mise en œuvre sous-jacents de Vue. Si vous en avez besoin, vous pouvez en tirer des leçons et vous y référer. J'espère que le contenu que nous avons compilé pourra vous aider.

Avant-propos

J'ai récemment étudié cet article sur l'analyse des principes de Vue et la mise en œuvre de la liaison bidirectionnelle MVVM. Je résumerai mes réflexions pendant mes études.

Vue est un framework MVVM typique. Le modèle est juste un objet JavaScript ordinaire. Si vous le modifiez, la vue sera automatiquement mise à jour. Cette conception rend la gestion des états très simple et intuitive. Alors, comment Vue associe-t-elle le modèle et la vue ?

Aperçu des principes d'implémentation

Voici le code de l'article mentionné dans la préface, un morceau de code typique qui incarne les caractéristiques de Vue :

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
  var vm = new MVVM({
    el: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue implémente ce type de données L'effet de la liaison bidirectionnelle nécessite trois modules principaux :

Observateur : peut surveiller tous les attributs de l'objet de données s'il y a des modifications, il peut obtenir la dernière valeur et avertir les abonnés

Compile : Oui Scannez et analysez les instructions de chaque nœud d'élément, remplacez les données selon le modèle d'instruction et liez la fonction de mise à jour correspondante

Watcher : En tant que pont reliant Observer et Compile, il peut abonnez-vous et recevez les modifications de chaque attribut Notifiez et exécutez la fonction de rappel correspondante liée par l'instruction pour mettre à jour la vue

Observer

Le cœur d'Observer est de surveiller les modifications des données via Object.defineProperty( ). Les setters et les setters peuvent être définis dans cette fonction Getter, chaque fois que les données changent, le setter sera déclenché. À ce moment-là, l'Observateur informera l'abonné, et l'abonné est l'Observateur.

Watcher

Les abonnés Watcher servent de pont pour la communication entre Observer et Compile. Les principales choses qu'ils font sont :

1. lorsqu'ils sont instanciés. Ajoutez-vous dans l'attribut abonné (dep)

2. Il doit avoir une méthode update()

3. pour être averti par dep.notice() des changements d'attribut Quand, il peut appeler sa propre méthode update() et déclencher le rappel lié dans Compile

Compile

La principale chose que Compile fait est d'analyser les instructions du modèle et convertissez le modèle, remplacez les variables par des données, puis initialisez la vue de la page de rendu, liez la fonction de mise à jour au nœud correspondant à chaque instruction et ajoutez un abonné pour surveiller les données. Une fois les données modifiées, vous recevrez une notification et. mettre à jour la vue.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Bootstrap implémente un menu de navigation latéral groupé pliable

Exemple de sélection de cases à cocher dans une table layui, sélectionnez tous les styles et fonctions

Instance d'ajout dynamique d'une option à layui select

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!