Qu'est-ce que la liaison bidirectionnelle vue.js ?

Liaison bidirectionnelle vue.js : la propriété accesseur est une propriété spéciale dans l'objet. Elle ne peut pas être définie directement dans l'objet, mais doit être définie séparément via la méthode [defineProperty()].

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

1. Attributs de l'accesseur

Les La propriété accesseur est une propriété spéciale de l'objet. Elle ne peut pas être définie directement dans l'objet, mais doit être définie séparément via la méthode définirProperty().

       var obj = { };
       // 为obj定义一个名为 hello 的访问器属性
       Object.defineProperty(obj, "hello", {
         get: function () {return sth},
         set: function (val) {/* do sth */}
       })

                                                                                                                                                                                                                                                                 : fonctions get et set. obj.hello

// Lire des attributs consiste à appeler la fonction get et renvoyer la valeur de retour de la fonction get

obj.hello // Attribuer une valeur à un attribut revient à appeler l'ensemble L'affectation consiste en fait à transmettre des paramètres

obj.hello = "abc" Cela, à l'intérieur des méthodes get et set, pointe toutes deux vers obj, ce qui signifie que les fonctions get et set peuvent opérer sur les valeurs à l'intérieur de l'objet. De plus, les propriétés de l'accesseur "remplaceront" les propriétés ordinaires portant le même nom, car les propriétés de l'accesseur seront accessibles en premier et les propriétés ordinaires portant le même nom seront ignorées.

2. Implémentation d'une reliure bidirectionnelle minimaliste

L'effet de cet exemple est : les modifications apportées au texte saisi dans la zone de texte, le même contenu de texte sera affiché de manière synchrone dans le span ; si la valeur de obj.hello est explicitement modifiée dans js ou dans la console, la vue sera mise à jour en conséquence. Cela permet d'obtenir une liaison bidirectionnelle de model => view et view => model.

Ce qui précède est le principe de base de Vue pour implémenter la liaison bidirectionnelle.

3. Décomposition des tâches

Les exemples ci-dessus servent uniquement à illustrer le principe. Ce que nous voulons finalement réaliser est :

Tout d'abord, divisez la tâche en plusieurs sous-tâches :

1 . Zone de saisie Et le nœud de texte est lié aux données dans data

2. Lorsque le contenu de la zone de saisie change, les données dans data changent de manière synchrone. Autrement dit, view => modifications du modèle.

3. Lorsque les données dans data changent, le contenu du nœud de texte change simultanément. Autrement dit, modèle => afficher les modifications.

Pour réaliser la première tâche, le DOM doit être compilé. Voici un point de connaissance : DocumentFragment.

4. DocumentFragment

DocumentFragment (fragment de document) peut être considéré comme un conteneur de nœuds. Il peut contenir plusieurs nœuds enfants lorsque nous l'insérons dans le DOM. Ses enfants seront insérés dans le nœud cible, alors considérez-le comme un conteneur pour un ensemble de nœuds. Utiliser DocumentFragment pour traiter les nœuds est beaucoup plus rapide et meilleur que de manipuler directement le DOM. Lorsque Vue se compile, il détourne tous les nœuds enfants de la cible de montage (en réalité, les nœuds du DOM seront automatiquement supprimés via la méthode append) dans le DocumentFragment. Après un certain traitement, le DocumentFragment est renvoyé et inséré dans son ensemble. Monter la cible.

# Errata : flag.append() devrait être flag.appendChild(). Le même ci-dessous. L'utilisation de append() dans Chrome fonctionne correctement et aucune erreur n'est signalée.

 

5. Liaison d'initialisation des données

Le code ci-dessus implémente la première tâche. Nous pouvons voir que hello world a été présenté dans la zone de saisie et le nœud de texte.

6. Liaison de données réactive

Regardons l'idée de mise en œuvre de la tâche deux : lorsque nous saisissons Lors de la saisie de données dans la zone, l'événement d'entrée (ou l'événement keyup ou change) est d'abord déclenché. Dans le gestionnaire d'événements correspondant, nous obtenons la valeur de la zone de saisie et l'attribuons à l'attribut text de l'instance vm. Nous utiliserons définirProperty pour définir le texte dans les données comme propriété d'accesseur de vm, donc attribuer une valeur à vm.text déclenchera la méthode set. Il y a deux choses principales à faire dans la méthode set. La première consiste à mettre à jour la valeur de l'attribut et la seconde est laissée à la tâche trois.

La tâche 2 est terminée. La valeur de l'attribut de texte changera de manière synchrone avec le contenu de la zone de saisie :

7. Mode abonnement/publication (abonnement et publication)

Aucun changement. Comment faire en sorte que les nœuds de texte qui sont également liés au texte changent de manière synchrone ? Il existe ici un autre point de connaissance : le modèle de publication par abonnement.

Le modèle de publication par abonnement (également connu sous le nom de modèle d'observateur) définit une relation un-à-plusieurs, permettant à plusieurs observateurs de surveiller un objet de sujet en même temps lorsque le statut de l'objet de sujet change, tous seront notifiés de l'objet Observer.

L'éditeur émet une notification => L'objet sujet reçoit la notification et la pousse vers l'abonné => L'abonné effectue l'opération correspondante

Comme mentionné avant , la deuxième chose à faire lorsque la méthode set est déclenchée est d'envoyer une notification en tant qu'éditeur : "Je suis le texte de l'attribut, j'ai changé." Les nœuds de texte agissent en tant qu'abonnés et effectuent les opérations de mise à jour correspondantes après avoir reçu des messages.

8. Implémentation de la liaison bidirectionnelle

Avec le recul, chaque fois qu'une nouvelle Vue est créée, elle fait principalement deux choses : la première est de surveiller les données : observer ( data), la seconde consiste à compiler du HTML : nodeToFragement(id).

Au cours du processus de surveillance des données, un dépôt d'objet de thème sera généré pour chaque attribut des données.

Lors du processus de compilation HTML, un observateur d'abonné sera généré pour chaque nœud lié à la liaison de données, et l'observateur s'ajoutera au dépôt de l'attribut correspondant.

Nous avons implémenté : Modifier le contenu de la zone de saisie => Modifier la valeur de l'attribut dans la fonction de rappel d'événement => Déclencher la méthode set de l'attribut.

La prochaine chose que nous devons implémenter est : émettre une notification dep.notify() => Déclencher la méthode de mise à jour de l'abonné => Mettre à jour la vue.

La logique clé ici est la suivante : comment ajouter un observateur au dépôt de l'attribut associé.

Lors de la compilation du HTML, un Watcher est généré pour chaque nœud associé aux données. Que se passe-t-il dans la fonction Watcher ?

Tout d'abord, attribuez-vous à une variable globale Dep.target;

Deuxièmement, exécutez la méthode update, puis exécutez la méthode get, get's La méthode lit l'attribut accesseur de la machine virtuelle, déclenchant ainsi la méthode get de l'attribut accesseur. Dans la méthode get, l'observateur est ajouté au dépôt de l'attribut accesseur correspondant

Encore une fois, récupérez la valeur de l'attribut ; , puis Mettre à jour la vue.

Enfin, définissez Dep.target sur vide. Puisqu'il s'agit d'une variable globale et du seul pont entre watcher et dep, il faut s'assurer que Dep.target n'a qu'une seule valeur à tout moment.

À ce stade, la liaison bidirectionnelle Hello World est essentiellement implémentée. Le contenu du texte changera de manière synchrone avec le contenu de la zone de saisie. La modification de la valeur de vm.text dans le contrôleur sera reflétée de manière synchrone dans le contenu du texte.

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

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!