Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

1. Einleitung

Zeichnen Sie zunächst ein einfaches Bild.

Wenn wir Vue schreiben, haben wir immer mit Daten zu tun. Wir schreiben unsere Zieldaten in Daten und rendern die Daten dann reaktionsfähig über das {{xxx}}-Format im Differenzausdruck der Vorlage. Wenn sich die Daten in den Daten ändern, führt die orange Linie hier zu einer Änderung des Differenzausdrucks. Die Frage ist also: Wie überwachen wir die Datenänderungen? Hierbei geht es um die Problematik der Vue-Überwachungsdaten.

II. Überwachungsobjekte

2.1 Warum müssen wir Objekte überwachen?

Schreiben Sie zuerst die statischen Seiten, die Sie benötigen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Daten aktualisieren</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
    <div id="Wurzel">
        <ul>
            <li v-for="p in Personen" :key="p.id">
                {{p.name}} - {{p.alter}} = {{p.geschlecht}}
            </li>
        </ul>
    </div>
 
    <Skripttyp="text/javascript">
        Vue.config.productionTip = falsch
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten:{
                Personen:
                    {id:'001',name:'黑猫几绛',alter: 20, geschlecht: 'unbekannt'},
                    {id:'002',name:'白猫几绛',alter: 23, geschlecht: '男'},
                    {id:'003',name:'阿猫几绛',alter: 18, geschlecht: '女'}
                ]
            }
        })
    </Skript>
</body>
</html>

Nehmen wir nun an, dass die Anforderung besteht, auf der Seite eine Schaltfläche hinzuzufügen, über die die Daten mit der ID 002 geändert werden können.

<button @click="change">Klicken, um Baimao Jijiang zu ändern</button>
 
  Methoden:{
      ändern(){
          this.persons[1].name = 'Weißes Pferd'
          diese.personen[1].alter = 17
          this.persons[1].sex = 'Unbekannt'
      }
  }

Indem wir die Attribute einzeln ändern, können wir die Daten mit der ID 002 ändern, aber ist das etwas umständlich? Können wir eine so lange Änderung in ein Objekt umwandeln?

 this.persons[1] = {id:'002',name:'白马',alter: 17, geschlecht: 'unbekannt'}

Derzeit reagiert die Seite nicht, nachdem ich im Browser auf die Schaltfläche geklickt habe. Unerwarteterweise wurden jedoch im VM-Instanzobjekt die Daten von Personen[1] tatsächlich geändert!

Um dieses Problem zu lösen, können wir uns zunächst ein anderes Beispiel ansehen, dann den spezifischen Ausführungsprozess anzeigen, indem wir ihn im Browser ausgeben, und dann, nachdem wir verstanden haben, wie man es überwacht, auf dieses Problem zurückkommen.

2.2 Datenagent

Um die Datenüberwachung zu verstehen, müssen Sie auch ein grundlegendes Konzept verstehen: den Datenagenten.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Überwachungsobjekt</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
    <div id="Wurzel"></div>
    <Skripttyp="text/javascript">
        Vue.config.productionTip = falsch
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten:{
               Name: 'Schwarze Katze Jijiang',
               Alter: 20
            }
        })
    </Skript>
</body>
</html>

Wenn wir früher auf Daten in Daten zugreifen wollten, konnten wir den spezifischen Wert direkt über das Instanzobjekt abrufen, beispielsweise vm.name und vm.age. Tatsächlich ist dies eine vereinfachte Schreibweise nach der Datenproxyerstellung.

Vue verarbeitet Daten und legt die Daten in _data ab. Das Instanzobjekt kann die verarbeiteten Daten über ._data abrufen. Der einzige Unterschied besteht darin, dass der Wert des Attributs nicht mehr direkt angegeben wird, sondern über die Get-Methode abgerufen wird. Diese ähnelt in gewisser Weise der Getter-Methode, die in objektorientierten Sprachen wie JAVA verwendet wird, um private Variablen innerhalb einer Klasse abzurufen. Hier gibt es auch eine Set-Methode. Wenn sich der Datenwert in den Daten ändert, wird die Set-Methode aufgerufen, wodurch die Vorlage erneut analysiert wird. Anschließend wird ein neuer virtueller DOM generiert, um den neuen und den alten DOM zu vergleichen. Schließlich wird die Seite aktualisiert.

Dabei handelt es sich tatsächlich um Quellcodeprobleme. Wir werden in diesem Artikel nicht auf den Quellcode eingehen, da es sonst zu kompliziert wird. Um es einfach auszudrücken: Es gibt tatsächlich eine solche Methode in Vue:

vm._data = Daten = neuer Beobachter(Daten)

Verwenden Sie in der Observer-Funktion zuerst Object.keys, um alle Eigenschaften der Daten abzurufen und ein Array zu bilden, durchlaufen Sie dann das Array, verwenden Sie Object.defineProperty, um eine Datenentführung zu implementieren, und geben Sie schließlich das Endergebnis der Berechnung an _data weiter.

2.3 Objektüberwachungsbezogene API Vue.set

Gehen wir zuerst zur statischen Seite.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Daten aktualisieren</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
    <div id="Wurzel">
       <h2>Name der Schule: {{name}}</h2>
       <h2>Schuladresse: {{address}}</h2>
       <hr/>
       <h2>Name des Studenten: {{student.name}}</h2>
       <h2>Geschlecht des Studierenden: {{student.sex}}</h2>
       <h2>Alter des Studenten: {{student.age}}</h2>
       <h1>Freunde</h1>
       <ul>
           <li v-for="(f,index) in student.freunde" :key="index">
               {{f.name}} – {{f.alter}}
           </li>
       </ul>
    </div>
    <Skripttyp="text/javascript">
        Vue.config.productionTip = falsch
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten:{
                Name:'MIT',
                Adresse:'UUU',
                Student:
                    Name: 'Tom',
                    Alter: 20,
                    Freunde:
                        {Name: 'Jack', Alter: 21},
                        {Name: 'Mary', Alter: 20}
                    ]
                },
            }
        })
    </Skript>
</body>
</html>

Möglicherweise fällt Ihnen auf, dass das in der Vorlage angegebene Geschlecht in den Daten tatsächlich nicht vorhanden ist. Bei der Ausgabe eines Eigenschaftswerts, der in einem Objekt nicht vorhanden ist, wird „undefined“ ausgegeben, aber Vue zeigt den undefinierten Wert nach der Verarbeitung nicht an. Dies bedeutet, dass zu diesem Zeitpunkt auf der Seite nach dem Geschlecht des Schülers ein leerer Wert steht und in der Konsole kein Fehler angezeigt wird. Lassen Sie uns nun eine Anforderung stellen. Ob wir ein neues Geschlechtsattribut für Studierende hinzufügen müssen. Voraussetzung ist, dass die vorhandenen Daten nicht verändert werden können, das heißt, das Geschlecht darf nicht direkt in die Daten eingetragen werden.

Gemäß den zuvor eingeführten _data können wir versuchen, das Geschlechtsattribut direkt über _data zu binden. Dann stellte ich fest, dass es auf der Seite nicht gerendert wurde. Tatsächlich ist dies dem Problem in 2.1 etwas ähnlich. Die Analyse ist wie folgt.

Drucken wir zuerst die _Daten der VM aus. Wie in der folgenden Abbildung deutlich zu sehen ist, wurden der Attributname „Geschlecht“ und der unbekannte Attributwert erfolgreich zum Studentenobjekt hinzugefügt. Wenn Sie jedoch weiter nach unten schauen, gibt es in den vielen Get- und Set-Methoden unten keine Methode für das Geschlecht. Dies bedeutet, dass dieses später hinzugefügte Attribut nicht zu reagierenden Daten geworden ist.

Um dieses Problem zu lösen, können wir die von Vue bereitgestellte API verwenden, nämlich die Methode Vue.set(), um die später hinzugefügten Daten auch in responsive Daten umzuwandeln. Der erste Parameter „target“ dieser Methode gibt an, wem die Daten hinzugefügt werden sollen, der zweite Parameter „key“ gibt den Namen des hinzuzufügenden Attributs an und der dritte Parameter gibt den Attributwert an.

An diesem Punkt können wir Vue.set(vm._data.student,'sex','unknown') verwenden, um nicht nur die Eigenschaften in _data zu ändern, sondern auch die Daten auf der Seite zu überwachen und zu ändern. Es gibt auch eine API mit derselben Wirkung, nämlich vm.$set, die dieselbe Verwendung wie Vue.set() und dieselben Parameter hat, vm.$set(vm._data.student,'sex','unknown'). Die von diesen beiden Methoden hinzugefügten Daten können zu responsiven Daten werden.

Nach der Implementierung der Funktion können wir eine Optimierung der Abkürzung in Betracht ziehen. Aufgrund des Datenproxys vm.student === vm._data.student kann es zu Vue.set(vm.student,'sex','unknown) abgekürzt werden.

Als Nächstes überprüfen wir die Idee im Browser anhand der tatsächlichen Codierung. Nehmen wir an, wir fügen das Geschlechtsattribut durch Klicken auf eine Schaltfläche hinzu. Ich werde es hier nicht im Detail beschreiben und einfach den Code einfügen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Daten aktualisieren</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
    <div id="Wurzel">
       <button @click="addSex">Klicken Sie auf die Schaltfläche, um ein neues Geschlecht hinzuzufügen</button>
       <h2>Name der Schule: {{name}}</h2>
       <h2>Schuladresse: {{address}}</h2>
       <hr/>
       <h2>Name des Studenten: {{student.name}}</h2>
       <h2>Geschlecht des Studierenden: {{student.sex}}</h2>
       <h2>Alter des Studenten: {{student.age}}</h2>
       <h1>Freunde</h1>
       <ul>
           <li v-for="(f,index) in student.freunde" :key="index">
               {{f.name}} – {{f.alter}}
           </li>
       </ul>
    </div>
    <Skripttyp="text/javascript">
        Vue.config.productionTip = falsch
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten:{
                Name:'MIT',
                Adresse:'UUU',
                Student:
                    Name: 'Tom',
                    Alter: 20,
                    Freunde:
                        {Name: 'Jack', Alter: 21},
                        {Name: 'Mary', Alter: 20}
                    ]
                },
            },
            Methoden:{
                Geschlecht hinzufügen(){
                    // In Methoden bezieht sich dies auf das VM-Instanzobjekt // Dies kann auch als this.$set(this.student, 'sex', '男') geschrieben werden.
                    Vue.set(dieser.Student, 'Geschlecht', 'männlich')
                }
            }
        })
    </Skript>
</body>
</html>

Diese Methode hat jedoch gewisse Einschränkungen. Wenn die Addition erfolgreich ist, wird sie auf das Studentenobjekt in den Daten gesetzt. Was passiert, wenn sie direkt auf das Datenobjekt gesetzt wird? Angenommen, Sie müssen hier beispielsweise ein neues Attribut für das Datum und die Uhrzeit der Schulgründung hinzufügen. Wenn Sie weiterhin die Vue.set-Methode verwenden, wird ein Fehler gemeldet.

Es ist ersichtlich, dass diese Methode nur verwendet werden kann, um responsiven Objekten (wie hier data.student) neue Eigenschaften hinzuzufügen und Ansichtsaktualisierungen auszulösen. Weil Vue keine normalen neuen Eigenschaften erkennen kann.

2.4 Einem Objekt mehrere neue Werte zuweisen

Manchmal müssen Sie einem vorhandenen Objekt mehrere neue Eigenschaften zuweisen, z. B. mit Object.assign() oder _.extend(). Auf diese Weise dem Objekt hinzugefügte neue Eigenschaften lösen allerdings keine Aktualisierung aus. In diesem Fall sollten Sie also ein neues Objekt erstellen, indem Sie das Originalobjekt mit den Eigenschaften des Objekts kombinieren, das Sie einmischen möchten.

Wenn ich beispielsweise einem Schüler Größen- und Gewichtsmerkmale hinzufügen möchte, die vorher nicht vorhanden waren, kann ich Folgendes tun:

const add = {'Höhe': 180, "Gewicht": 150}
dieser.student = Objekt.zuweisen({},dieser.student, hinzufügen)

Das ursprüngliche Objekt und das neu hinzugefügte Objekt werden zusammengeführt und einem leeren neuen Objekt zugewiesen, welches dann this.student zugewiesen wird. Abschließend können die Daten responsive dem Studenten hinzugefügt werden.

3. Überwachungsarray

Gehen Sie trotzdem zuerst auf die statische Seite.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Daten aktualisieren</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
    <div id="Wurzel">
       <button @click="addSex">Klicken Sie auf die Schaltfläche, um ein neues Geschlecht hinzuzufügen</button>
       <h2>Name der Schule: {{name}}</h2>
       <h2>Schuladresse: {{address}}</h2>
       <hr/>
       <h2>Name des Studenten: {{student.name}}</h2>
       <h2>Geschlecht des Studierenden: {{student.sex}}</h2>
       <h2>Alter des Studenten: {{student.age}}</h2>
       <h1>Freunde</h1>
       <ul>
           <li v-for="(f,index) in student.freunde" :key="index">
               {{f.name}} – {{f.alter}}
           </li>
       </ul>
       <h1>Hobbys</h1>
       <ul>
           <li v-for="(h,index) in student.hobby" :key="index">
               {{H}}
           </li>
       </ul>
    </div>
    <Skripttyp="text/javascript">
        Vue.config.productionTip = falsch
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten:{
                Name:'MIT',
                Adresse:'UUU',
                Student:
                    Name: 'Tom',
                    Alter: 20,
                    Freunde:
                        {Name: 'Jack', Alter: 21},
                        {Name: 'Mary', Alter: 20}
                    ],
                    Hobby:['essen', 'schlafen', 'mit Bohnen spielen']
                },
            },
            Methoden:{
                Geschlecht hinzufügen(){
                    dies.$set(dieser.student, 'Geschlecht', 'männlich')
                }
            }
        })
    </Skript>
</body>
</html>

Nachdem wir vm._data in der Konsole gedruckt haben, können wir deutlich sehen, dass für das Hobby-Array im Student das Array als Ganzes über Get und Set verfügt, was reaktionsfähig ist. Die Elemente im Array reagieren jedoch nicht, sondern bleiben einfach im Array hängen. Aus diesem Grund gab es in 2.1 keine Reaktion auf der Seite, als wir versuchten, den Array-Indexindex neu zuzuweisen. Wenn Sie das Hobby-Array in ein Objekt ändern und es erneut drucken, werden Sie feststellen, dass die Eigenschaften im Objekt reagieren. Daraus können wir grob erraten, dass Sie in Vue einige spezielle Methoden verwenden müssen, wenn Sie den Wert in einem Array per Index ändern möchten.

Woher stammt die Methode? Jetzt können wir sehen, was in der Vue-Dokumentation steht. Auf der Seite „Dokumentlisten-Rendering“ -> „Array-Update-Erkennung“ -> „Methode ändern“ gibt es einen solchen Satz:

Vue umschließt die beobachteten Array-Mutationsmethoden, sodass diese auch Ansichtsaktualisierungen auslösen. Zu den gewrappten Methoden gehören:

drücken()aufklappen()verschieben()aufheben()spleißen()sortieren()umkehren()

Wenn wir die Daten im Array ändern möchten, können wir auch die oben genannten sieben Methoden ausprobieren. Beim Anblick dieser Methoden denken Sie vielleicht an die Methoden in der Array-Prototypkette, aber das ist hier nicht ganz richtig. Vue hat diese Methoden umschlossen und gekapselt. Wenn Vue diese Methoden analysiert, besteht der erste Schritt immer noch darin, die Methoden in der Array-Prototypenkette normal aufzurufen, und der zweite Schritt besteht darin, die Vorlage erneut zu analysieren. Aus diesem Grund kann die Verwendung dieser Methoden Ansichtsaktualisierungen auslösen, da nach der erneuten Analyse der Vorlage ein neuer virtueller DOM generiert wird, um den neuen und den alten DOM zu vergleichen und schließlich die Seite zu aktualisieren. Diese Idee kann durch die Tatsache bestätigt werden, dass vm._data.student.hobby.push === Array.prototype.push falsch ist.

Was müssen wir hier beispielsweise tun, wenn wir das Hobby „Bohnen schlagen“ in „Lernen“ ändern möchten?

Bevor ich auf diese Punkte eingehe, würde ich den folgenden Code verwenden, was zu einer falschen Darstellung führen würde. Eine Aktualisierung der Seite erfolgt nach Änderung der Daten nicht.

 this.student.hobby[2] = 'Studieren'

Als nächstes probieren wir zwei Methoden aus. Versuchen wir zunächst die soeben vorgestellte Array-Operationsmethode.

dieses.student.hobby.splice(2,3,'Lernen')

Versuchen Sie als Nächstes die zuvor vorgestellte Vue.set-Methode.

Hier möchten wir hinzufügen, dass in 2.3, als wir die Verwendung dieser Methode zum Ändern des Werts in einem Objekt vorgestellt haben, der zweite Parameter der Methode der Attributname war. Wenn diese Methode in einem Array verwendet wird, sollte der zweite Parameter der Index des Elements im Array sein.

dies.$set(dieses.student.hobby,2,'lernen')

Mit beiden Methoden können die Daten im Hobby erfolgreich geändert und auf der Seite aktualisiert werden.

Im Allgemeinen können Sie Werte nicht nach Array-Index zuweisen. Sie können jedoch die Richtung des Arrays selbst ändern. Wie wir im vorherigen Bild gesehen haben, reagiert das Hobby-Array selbst und kann über Get und Set überwacht werden. Beispielsweise wird in der Geschäftslogik ein Filter zum Filtern des Arrays verwendet und dann dem Array zugewiesen, in dem bereits Daten vorhanden sind. Hier können wir uns noch einmal die Einführung zum Ersetzen von Arrays in der Dokumentation ansehen. Methoden wie Filter, Concat und Slice verändern das ursprüngliche Array nicht, sondern geben immer ein neues Array zurück. Bei der Mutationsmethode kann das alte Array durch das neue Array ersetzt werden.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Überwachen von Änderungen und Methoden der Routing-Parameter in Vue
  • Vue implementiert Routenüberwachung und Parameterüberwachung
  • Implementierung der gleichzeitigen Überwachung mehrerer Parameter in Vue

<<:  Verwendung des if-Urteils in HTML

>>:  Analyse der Ursache des Docker-Fehlers Beendet (1) vor 4 Minuten

Artikel empfehlen

InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her

Voraussetzung: Speichern Sie die .frm- und .ibd-D...

Detaillierte Erklärung zweier schneller Möglichkeiten zum Schreiben von console.log in vscode

(I) Methode 1: Vorab direkt im Skript-Tag definie...

Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle

Was ist eine Tabelle? Es besteht aus Zellenzellen...

So stellen Sie zabbix_agent in Docker bereit

zabbix_agent-Bereitstellung: Empfehlung: zabbix_a...

Vuex implementiert einen einfachen Einkaufswagen

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe

Der zu erzielende Effekt In vielen Fällen überwac...

HTML-Kommentare Symbole zum Markieren von Textkommentaren in HTML

HTML-Kommentare: Wir müssen häufig einige HTML-Ko...

So erstellen Sie einen Nginx-Image-Server mit Docker

Vorwort Bei der allgemeinen Entwicklung werden Bi...

Natives js zum Erzielen eines Akkordeoneffekts

Auch bei der tatsächlichen Entwicklung von Websei...

Tencent-Interview: Was sind die Gründe, warum eine SQL-Anweisung sehr langsam ausgeführt wird? ---Sehen Sie sich die Serie „Regret“ nicht an (empfohlen)

Ehrlich gesagt erfordert diese Frage eine Menge g...

Implementierung der Elementzeitleiste

Inhaltsverzeichnis Komponenten - Zeitleiste Benut...

Tutorial zur Docker-Installation in einer Linux-Umgebung

1. Installationsumgebung Docker unterstützt die f...

Detaillierte Erklärung des Responsive-Prinzips von Vue3

Inhaltsverzeichnis Überprüfung der responsiven Pr...

HTML zeigt Auslassungspunkte hinter dem Text an... implementiert durch Textüberlauf

Sie müssen CSS gleichzeitig auf Div oder Span anwe...

Detaillierte Erklärung der Ansichten in MySQL

Sicht: Ansichten in MySQL haben viele Ähnlichkeit...