Verständnis des neuen Reaktivitätssystems in Vue 3-js-Tutorial-php.cn

Understanding the New Reactivity System in Vue 3

Eine der Kernkomponenten eines modernen Front-End-Frameworks ist ein reaktionsschnelles System. Es sind magische Zauberstäbe, die es Anwendungen ermöglichen, eine hohe Interaktivität, Dynamik und Reaktionsfähigkeit zu erreichen. Zu verstehen, was ein reaktionsschnelles System ist und wie es in der Praxis anwendet, ist für jeden Webentwickler eine entscheidende Fähigkeit.

reaktionsschnelle Systeme sind Mechanismen, die die Datenquelle (Modell) und die Datenrepräsentationsschicht (View) in der Synchronisation automatisch aufbewahren. Immer wenn sich das Modell ändert, wird die Ansicht erneut gerendert, um diese Änderungen widerzuspiegeln. Nehmen wir als Beispiel einen einfachen Markdown -Editor. Es verfügt normalerweise über zwei Panes: einen zum Schreiben von Markdown -Code (Änderung des zugrunde liegenden Modells) und das andere zur Vorschau von kompilierten HTML (Anzeigen aktualisierter Ansichten). Wenn Sie Inhalte in den Schreibbereich schreiben, wird er sofort und automatisch im Vorschau -Bereich in der Vorschau eingerichtet. Dies ist natürlich nur ein einfaches Beispiel. Oft ist die Situation viel komplizierter.

In vielen Fällen hängen die Daten, die wir anzeigen möchten, von einigen anderen Daten ab. In diesem Fall werden die Abhängigkeiten verfolgt und die Daten entsprechend aktualisiert. Nehmen wir beispielsweise an, wir haben eine Fullname -Eigenschaft, die von den Eigenschaften von FirstName und Lastname abhängt. Wenn Abhängigkeiten geändert werden, wird die Vollname -Eigenschaft automatisch neu berechnet und die Ergebnisse in der Ansicht angezeigt.

Jetzt, da wir festgestellt haben, was Reaktionsfähigkeit ist, ist es an der Zeit zu erfahren, wie der neue Vue 3 -Reaktionsmechanismus funktioniert und wie er in der Praxis verwendet werden kann. Aber bevor wir dies tun, werfen wir einen kurzen Blick auf den alten Vue 2 Responsive -Mechanismus und seine Mängel.

Schlüsselpunkte

vue 3 führt ein vollständig verbessertes reaktionsschnelles System ein, das ES6 -Proxy verwendet und APIs für verbesserte Flexibilität und Funktionalität widerspiegelt.

Das neue Responsive System in Vue 3 verfolgt und aktualisiert automatisch Änderungen des Anwendungsstatus und unterstützt komplexere Datenstrukturen wie MAP und SET.
,
VUE 3 ermöglichen es Entwicklern, die Datenreaktionsfähigkeit detaillierter zu steuern, wobei reactive für Grundtypen und ref für Objekte gilt. readonly ref Erweiterte reaktionsschnelle API -Methoden wie reactive und
computed Vue 3 löst die Einschränkungen in Vue 2 Responsive Systems auf, z. B. die Erkennung von Änderungen an der Arraylänge und den hinzugefügten Objekteigenschaften. watch
kurz untersuchen Vue 2 Responsive Mechanismus

Der reaktionsschnelle Mechanismus in Vue 2 ist mehr oder weniger "versteckt". Wir stecken alles in ein Datenobjekt und Vue macht es implizit reaktionsschnell. Einerseits vereinfacht dies die Arbeit von Entwicklern, andererseits führt dies auch zu weniger Flexibilität.

Hinter den Kulissen verwendet VUE 2 ES5 -Objekt.DefineProperty (), um alle Eigenschaften des Datenobjekts in Getter und setzter umzuwandeln. Für jede Komponenteninstanz erstellt VUE eine Abhängigkeitsbeobachterinstanz. Alle als Abhängigkeiten während des Rendern des Komponenten gesammelten Attribute werden vom Beobachter aufgezeichnet. Später, wenn der Setter der Abhängigkeit abgefeuert wird, wird der Beobachter mitgeteilt, dass die Komponenten die Ansicht neu renoviert und aktualisiert. So funktioniert alle Magie. Leider gibt es einige Dinge, die Sie sich bewusst sind.

Vorsichtsmaßnahmen zur Änderung der Erkennung

vue kann bestimmte Datenänderungen aufgrund von Object.DefineProperty () Einschränkungen nicht erkennen. Dazu gehören:

add/entfernen Sie Attribute zum Objekt (z. B. obj.newkey = value)
Array -Elemente nach Index festlegen (z. B. arr [index] = newValue)
Die Länge des Arrays (z. B. arr.length = newLength)

Zum Glück bietet uns Vue die Vue.set -API -Methode, die dem reaktionsschnellen Objekt eine Eigenschaft hinzufügt, um sicherzustellen, dass die neue Eigenschaft ebenfalls reaktionsschnell ist und die Aktualisierungen der Ansicht auslöst.

Erforschen wir die obige Situation im folgenden Beispiel:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Nach dem Login kopieren

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});

Nach dem Login kopieren

Im obigen Beispiel können wir sehen, dass keine dieser drei Methoden funktioniert. Wir können dem Personobjekt keine neuen Eigenschaften hinzufügen. Wir können keine Indizes verwenden, um Elemente im Aktivitäten -Array zu bearbeiten. Wir können auch nicht die Länge des Aktivitäten -Arrays ändern.

Natürlich gibt es Lösungen für diese Situationen, die wir im nächsten Beispiel untersuchen werden:

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      Vue.set(this.person, 'age', 30)
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        Vue.set(this.activities, index, newValue)
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.splice(0)
    }
  }
});

Nach dem Login kopieren

In diesem Beispiel verwenden wir die Vue.set -API -Methode, um dem Personobjekt eine New -Age -Eigenschaft hinzuzufügen und ein bestimmtes Element aus dem Aktivitäten -Array auszuwählen/zu ändern. Im letzten Fall verwenden wir nur die in JavaScript eingebaute Splice () Array -Methode.

Wie wir sehen, funktioniert dies, aber es ist ein bisschen ungeschickt und führt zu inkonsistenten Codebasen. Glücklicherweise wurde dieses Problem in Vue 3 gelöst. Mal sehen, wie magisch es im folgenden Beispiel ist:

const App = {
  data() {
    return {
      person: {
        name: "David"
      },
      activities: [
        "Reading books",
        "Listening music",
        "Watching TV"
      ]
    }
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
}

Vue.createApp(App).mount('#app')

Nach dem Login kopieren

In diesem Beispiel unter Verwendung von Vue 3 kehren wir zu der im ersten Beispiel verwendeten JavaScript-Funktionalität zurück, und jetzt funktionieren alle Methoden ordnungsgemäß.

In Vue 2.6 wurde die API -Methode vue.observable () eingeführt. Es enthüllt ein reaktionsschnelles System in gewissem Maße, sodass Entwickler die Objekte explizit reagieren können. Tatsächlich ist dies die gleiche genaue Methode, die VUE verwendet, um Datenobjekte intern zu wickeln, und ist nützlich, um einen minimalen Cross-Component-Statusspeicher für einfache Szenarien zu erstellen. Obwohl es nützlich ist, stimmt dieser einzelne Ansatz nicht mit den Funktionen und Flexibilität der vollständigen, featurereichen reaktionsschnellen API überein, die mit Vue 3 geliefert wird. Wir werden den Grund im nächsten Abschnitt sehen.

Hinweis: Da Object.defineProperty () nur eine ES5 -Funktion ist und nicht simuliert werden kann, unterstützt VUE 2 IE8 und unten nicht.

Wie funktioniert Vue 3 Responsive Mechanismus

Das Responsive System in Vue 3 wurde vollständig umgeschrieben, um den ES6 -Proxy zu nutzen und die API zu reflektieren. Die neue Version enthüllt eine featurereichen reaktionsschnelle API, die das System flexibler und leistungsfähiger macht als zuvor.

Mit

Proxy-API können Entwickler Objektvorgänge mit niedrigem Niveau an Zielobjekten abfangen und ändern. Ein Proxy ist ein Klon/ein Wrapper eines Objekts (als Ziel bezeichnet) und bietet spezielle Funktionen (als fallen bezeichnet), die auf bestimmte Operationen reagieren und das integrierte Verhalten von JavaScript überschreiben Objekte. Wenn Sie weiterhin das Standardverhalten verwenden müssen, können Sie die entsprechende Reflexions -API verwenden, die, wie der Name schon sagt, die Methoden der Proxy -API widerspiegelt. Erforschen wir ein Beispiel, um zu sehen, wie diese APIs in Vue 3 verwendet werden:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Nach dem Login kopieren

Um einen neuen Proxy zu erstellen, verwenden wir den neuen Proxy -Konstruktor (Target, Handler). Es akzeptiert zwei Parameter: das Zielobjekt (Personobjekt) und das Handler -Objekt, das definiert, welche Operationen (Get and Set -Operationen) abgefangen werden. Im Handler -Objekt verwenden wir die GET & Setzen Sie die Fallen, um zu verfolgen, wann Eigenschaften gelesen werden und wenn Eigenschaften geändert/hinzugefügt werden. Wir richten Konsolenanweisungen ein, um sicherzustellen, dass die Methode ordnungsgemäß funktioniert.

Get and Set -Fallen nehmen die folgenden Parameter:

Ziel: Zielobjekt, das von Proxy
Eigenschaft: Eigenschaftsname
Wert: Attributwert (dieser Parameter wird nur für festgelegte Operationen verwendet)
Empfänger: Das Objekt, auf dem die Operation ausgeführt wird (normalerweise ein Proxy)

reflektiert die API -Methode akzeptiert dieselben Parameter wie die entsprechende Proxy -Methode. Sie werden verwendet, um das Standardverhalten für eine bestimmte Operation zu implementieren, Attributname für eine Get -Trap zurückzugeben und true zurückzugeben, wenn eine Eigenschaft festgelegt ist, ansonsten false zurückgeben.

Die Funktionen

kommentierte Track () und Trigger () sind vue-spezifisch und werden verwendet, um zu verfolgen, wenn Eigenschaften gelesen werden und wenn Eigenschaften geändert/hinzugefügt werden. Infolgedessen wird Vue den Code mit dieser Eigenschaft umgeleitet.

Im letzten Teil des Beispiels verwenden wir Konsolenanweisungen, um das ursprüngliche Personenobjekt auszugeben. Wir verwenden dann eine andere Anweisung, um den Attributnamen des Proxy -Objekts zu lesen. Als nächstes ändern wir die Alterseigentum und erstellen eine neue Hobby -Immobilie. Schließlich geben wir das Personobjekt erneut aus, um festzustellen, ob es korrekt aktualisiert wurde.

Dies ist eine kurze Beschreibung des Vue 3 -Reaktionsmechanismus. Natürlich ist die tatsächliche Implementierung viel komplexer, aber hoffentlich reichen die oben angegebenen Beispiele aus, um Ihnen die Hauptidee zu machen.

Bei der Verwendung von Vue 3 -Reaktionsmechanismus müssen die folgenden Punkte berücksichtigt werden:

Es ist nur für ES6-fähige Browser
Responsive Proxy entspricht nicht dem ursprünglichen Objekt

Erforschen Sie Vue 3 Responsive API

Schließlich gehen wir zum Vue 3 Responsive API selbst. In den folgenden Abschnitten untersuchen wir den API -Ansatz, der logisch gruppiert ist. Ich habe die Methoden gruppiert, weil ich denke, dass es einfacher ist, auf diese Weise zu präsentieren. Beginnen wir mit den Grundlagen.

grundlegende Methoden

Die erste Gruppe enthält die grundlegendsten Methoden zur Steuerung der Datenreaktionsfähigkeit:

ref akzeptiert einen Basiswert oder ein normales Objekt und gibt einen reaktionsschnellen und veränderlichen Ref -Objekt zurück. Das Ref -Objekt hat nur einen Attributwert, der auf einen Basiswert oder ein normales Objekt hinweist.
reaktiv akzeptiert ein Objekt und gibt eine reaktionsschnelle Kopie des Objekts zurück. Die Transformation ist tief und beeinflusst alle verschachtelten Eigenschaften.
readonly akzeptiert Ref oder Objekt (normal oder reaktionsschnell) und gibt das schreibgeschützte Objekt des ursprünglichen Objekts zurück. Die Transformation ist tief und beeinflusst alle verschachtelten Eigenschaften.
Markraw gibt das Objekt selbst zurück und verhindert, dass es in ein Proxy -Objekt umgewandelt wird.

Lassen Sie uns nun die praktische Anwendung dieser Methoden sehen:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Nach dem Login kopieren

In diesem Beispiel untersuchen wir die Verwendung von vier grundlegenden Reaktionsmethoden.

Erstens erstellen wir einen Zähler -Ref -Objekt mit einem Wert von 0. In der Ansicht platzieren wir dann zwei Tasten, indem wir den Wert des Zählers inkrementieren und verringern. Wenn wir diese Schaltflächen verwenden, sehen wir, dass der Zähler tatsächlich reagiert.

Zweitens erstellen wir ein reaktionsschnelles von Person. In der Ansicht platzieren wir dann zwei Eingabesteuerelemente, mit denen der Name und Alter der Person bearbeitet werden. Wenn wir menschliche Eigenschaften bearbeiten, werden sie sofort aktualisiert.

Drittens erstellen wir ein mathematisches schreibgeschütztes Objekt. In der Ansicht setzen wir dann eine Taste, um den Wert der PI -Eigenschaft der Mathematik zu verdoppeln. Wenn wir jedoch auf die Schaltfläche klicken, wird in der Konsole eine Fehlermeldung angezeigt, in der uns das Objekt schreibgeschützt ist und wir seine Eigenschaften nicht ändern können.

Schließlich erstellen wir ein Alphabetnumber -Objekt, das wir nicht in einen Proxy konvertieren und es als ursprüngliches Objekt markieren möchten. Es enthält alle Buchstaben und ihre entsprechenden Zahlen (für die Kürze werden nur die ersten drei Buchstaben hier verwendet). Es ist unwahrscheinlich, dass sich diese Reihenfolge ändert, daher behalten wir dieses Objekt absichtlich als normales Objekt, was für die Leistung von Vorteil ist. Wir rendern den Objektinhalt in der Tabelle und setzen eine Schaltfläche, um den Wert des B -Attributs auf 3 zu ändern. Wir zeigen dies, um zu zeigen, dass das Objekt , obwohl dies geändert werden kann, dies jedoch nicht dazu führt, dass die Ansicht neu geführt wird.

Markraw eignet sich perfekt für Objekte, die wir nicht reaktionsschnell machen müssen, z. B. lange Listen von Ländercodes, Farbnamen und deren entsprechende hexadezimale Nummern usw.

Schließlich verwenden wir die im nächsten Abschnitt beschriebene Typüberprüfungsmethode, um den Typ jedes von uns erstellten Objekts zu testen und zu bestimmen. Wir verwenden den Onbounted () Lifecycle Hook, um diese Überprüfungen auszulösen, wenn die Anwendung ursprünglich gerendert wird.

Typ -Checking -Methode

Diese Gruppe enthält alle oben genannten vier oben genannten Typen:

Mehr Ref -Methoden

Diese Gruppe enthält andere REF -Methoden:

Unref gibt den Wert von Ref.
TriggerRef führt jeden Effekt, der an flaches Effekt gebunden ist, manuell aus.
CustomRef erstellt einen benutzerdefinierten REF mit explizitem Kontrolle über die Abhängigkeitsverfolgung und -aktualisierungsauslöschung.

flache Methode

Die Methoden in dieser Gruppe sind die "flachen" Äquivalente von Ref, Reactive und Readonly:

flachref erstellt einen REF, der nur sein Wertattribut verfolgt, ohne dass der Wert reagiert.
flachreaktiv erstellt einen reaktionsschnellen Proxy, der nur seine eigenen Eigenschaften verfolgt und keine verschachtelten Objekte enthält.
flachreadonly erstellt einen schreibgeschützten Proxy, der nur seine eigenen Eigenschaften schreibgeschützt macht, ohne verschachtelte Objekte.

Verstehen wir diese Methoden leichter, indem wir die folgenden Beispiele untersuchen:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Nach dem Login kopieren

Dieses Beispiel beginnt mit dem Erstellen eines Einstellungen flacher Ref -Objekt. In der Ansicht fügen wir dann zwei Eingabesteuerelemente hinzu, um deren Breite und Höheneigenschaften zu bearbeiten. Aber wenn wir versuchen, sie zu ändern, sehen wir, dass sie nicht aktualisiert werden. Um dieses Problem zu lösen, fügen wir eine Schaltfläche hinzu, die das gesamte Objekt und alle Eigenschaften ändert. Jetzt funktioniert es. Dies liegt daran, dass der Wert des Wertes (Breite und Höhe als einzelne Eigenschaft) nicht in ein reaktionsschnelles Objekt konvertiert wird, sondern die Variation des Wertes (das gesamte Objekt) immer noch verfolgt wird.

Als nächstes erstellen wir einen Einstellungsgespräch mit flachem reaktivem Proxy, der die Breiten- und Höheneigenschaften und ein verschachteltes Koordeinobjekt enthält, das die X- und Y -Eigenschaften enthält. In der Ansicht setzen wir dann eine Eingabesteuerung für jede Eigenschaft. Wenn wir die Breite und Höheneigenschaften ändern, sehen wir, dass sie reaktionsmäßig aktualisiert werden. Wenn wir jedoch versuchen, die X- und Y -Eigenschaften zu ändern, sehen wir, dass sie nicht verfolgt werden.

Schließlich erstellen wir ein Einstellungsbetragsblock, das die gleichen Eigenschaften wie Einstellungen aufweist. Wenn wir versuchen, das Attribut der Breite oder Höhe zu ändern, wird in der Konsole eine Fehlermeldung angezeigt, in der uns das Objekt schreibgeschützt ist und wir seine Attribute nicht ändern können. Andererseits können die X- und Y -Eigenschaften ohne Probleme geändert werden.

verschachtelte Koordnungsobjekte aus den letzten beiden Beispielen werden von der Transformation nicht beeinflusst und bleiben als normale Objekte. Dies bedeutet, dass es frei modifiziert werden kann, aber alle Modifikationen davon werden nicht von Vue verfolgt.

Conversion -Methode

Die nächsten drei Methoden werden verwendet, um den Proxy in Refs (s) oder normale Objekte zu konvertieren:

Toref erstellt einen Schiedsrichter für die Eigenschaft auf dem Quell -Responsive -Objekt. Ref hält eine reaktionsschnelle Verbindung zu seinen Quelleigenschaften.
Torefs wandelt ein reaktionsschnelles Objekt in ein normales Objekt um. Jede Eigenschaft eines normalen Objekts ist ein Ref, der auf die entsprechende Eigenschaft des ursprünglichen Objekts zeigt.
Toraw gibt das ursprüngliche normale Objekt eines reaktionsschnellen oder schreibgeschützten Proxy zurück.

Lassen Sie uns sehen, wie diese Conversions im folgenden Beispiel funktionieren:

const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});

Nach dem Login kopieren

In diesem Beispiel erstellen wir zunächst ein grundlegendes Person, das wir als Quellobjekt verwenden werden.

Dann konvertieren wir die Namenseigenschaft der Person in einen Schiedsrichter mit demselben Namen. In der Ansicht fügen wir dann zwei Eingabesteuerelemente hinzu - eine für den Namen Ref und eine für die Besitz von Person. Wenn wir einen von ihnen ändern, wird der andere auch entsprechend aktualisiert, sodass die reaktionsschnelle Verbindung zwischen ihnen beibehalten wird.

Als nächstes wandeln wir alle Eigenschaften der Person in einen einzelnen REF um, der im Persondetails -Objekt enthalten ist. In der Ansicht fügen wir dann erneut zwei Eingabesteuerelemente hinzu, um einen REF zu testen, den wir gerade erstellt haben. Wie wir sehen können, wird das Alter von Persondetails wie im vorherigen Beispiel vollständig mit dem Alterseigentum der Person synchronisiert.

Schließlich konvertieren wir das von Person reaktionsende Objekt in ein normales Objekt von Rohperson. In der Ansicht fügen wir dann eine Eingabesteuerung hinzu, um die Hobby -Eigenschaft von Rawperson zu bearbeiten. Aber wie wir sehen können, verfolgt Vue konvertierte Objekte nicht.

berechnete und beobachten Methoden

Der letzte Satz von Methoden wird verwendet, um komplexe Werte zu berechnen und spezifische Werte zu "überwachen":

berechnet akzeptiert die Getter -Funktion als Argument und gibt einen unveränderlichen Responsive Ref -Objekt zurück.
Watcheffect führt sofort eine Funktion aus und verfolgt die Abhängigkeiten reaktionsmäßig und führt sie erneut aus, wenn sich die Abhängigkeiten ändern.
Watch entspricht genau diesem. Es überwacht eine bestimmte Datenquelle und wendet Nebenwirkungen in der Rückruffunktion an, wenn sich die überwachte Quelle ändert.

Betrachten wir das folgende Beispiel:

<div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button @click="addAgeProperty">Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button @click="editActivity(index)">Edit</button></li>
  </ul>
  <button @click="clearActivities">Clear the activities list</button>
</div>

Nach dem Login kopieren

In diesem Beispiel erstellen wir eine FullName -berechnete Variable, die basierend auf FirstName und Lastname Ref berechnet wird. In der Ansicht fügen wir dann zwei Eingabesteuerelemente hinzu, um die beiden Teile des vollständigen Namens zu bearbeiten. Wie wir sehen können, wird FullName, wenn wir einen Teil ändern, neu berechnet und die Ergebnisse aktualisiert.

Als nächstes erstellen wir einen Volumenref und setzen einen Uhreffekt dafür. Jedes Mal, wenn das Volumen geändert wird, wird der Effekt die Rückruffunktion ausgeführt. Um dies zu beweisen, fügen wir in der Ansicht eine Schaltfläche hinzu, die das Volumen um 1 erhöht. Wir legen eine Bedingung in der Rückruffunktion fest, um zu testen, ob der Wert des Volumens durch 3. TRUE teilnehmen kann. Wenn er true zurückgibt, wird eine Warnmeldung angezeigt. Der Effekt wird einmal ausgeführt, wenn die Anwendung startet, legt den Wert des Volumens fest und wird dann jedes Mal erneut ausgeführt, wenn der Volumenwert geändert wird.

Schließlich erstellen wir einen Status -Ref und setzen eine Uhrenfunktion, um ihre Änderungen zu verfolgen. Sobald sich der Status ändert, wird die Rückruffunktion ausgeführt. In diesem Beispiel fügen wir eine Taste hinzu, um den Status zwischen Spielen und Pause zu wechseln. Jedes Mal, wenn dies geschieht, wird eine Warnmeldung angezeigt.

Watcheffect und Uhren sehen in Bezug auf die Funktionalität sehr ähnlich, haben jedoch einige offensichtliche Unterschiede:

Watcheffect behandelt alle reaktionsschnellen Eigenschaften, die in der Rückruffunktion als Abhängigkeiten enthalten sind. Wenn der Rückruf drei Eigenschaften enthält, werden alle implizit für Änderungen verfolgt.
Beobachten Sie nur die Eigenschaften, die wir als Parameter in den Rückruf einbeziehen. Darüber hinaus liefert es die vorherigen und aktuellen Werte des Überwachungsattributs.

Wie Sie sehen, bietet die Vue 3 Responsive API eine Vielzahl von Methoden, die in verschiedenen Anwendungsfällen verwendet werden können. Die API ist sehr groß, und in diesem Tutorial erforsche ich nur die Grundlagen. Weitere detailliertere Explorations-, Detail- und Kantenfälle finden Sie in der Responsive API-Dokumentation.

Schlussfolgerung

In diesem Artikel stellen wir vor, was ein reaktionsschnelles System ist und wie es in Vue 2 und Vue 3 implementiert werden kann. Wir sehen, dass Vue 2 in Vue 3 einige Mängel erfolgreich gelöst hat. Der Vue 3 Responsive Mechanismus ist ein vollständiges Umschreiben, das auf modernen JavaScript -Funktionen basiert. Fassen wir seine Vor- und Nachteile zusammen.

Profis:

Es kann als eigenständiges Paket verwendet werden. Zum Beispiel können Sie es mit React verwenden.
Es bietet dank seiner featurereichen API eine größere Flexibilität und Funktionalität.
Es unterstützt mehr Datenstrukturen (MAP, Schwächen, gesetzt, schwachset).
Es funktioniert besser. Nur die erforderlichen Daten werden reaktionsschnell.
Die Überlegungen zur Datenoperation in VUE 2 wurden behoben.

Nachteile:

Es ist nur für ES6-fähige Browser verfügbar.
In Bezug auf den Identitätsvergleich (===) ist responsive Proxy nicht gleich dem ursprünglichen Objekt.
Es erfordert mehr Code als den "automatischen" Reaktionsmechanismus von Vue 2.

Das Fazit ist, dass der Vue 3-Reaktionsmechanismus ein flexibles und leistungsstarkes System ist, das sowohl von VUE- als auch von Nicht-Vorstellungsentwicklern verwendet werden kann. Egal in welcher Situation Ihre Situation ist, schnappen Sie es sich einfach und fangen Sie an, etwas Erstaunliches zu bauen.

Vue 3 Responsive System FAQ (FAQ)

Was ist ein Vue 3 Responsive System?

Vue 3 Responsive System ist ein grundlegender Aspekt von Vue.js, einem beliebten JavaScript -Framework. Es ist verantwortlich für die Verfolgung von Änderungen im Anwendungszustand und die Aktualisierung des DOM (Dokumentobjektmodells), um diese Änderungen widerzuspiegeln. Das System basiert auf dem Konzept von "reaktionsschnellen Objekten". Wenn sich die Eigenschaften dieser Objekte ändern, löst VUE automatisch die erforderlichen Aktualisierungen aus. Dies erleichtert Entwicklern, dynamische, reaktionsschnelle Webanwendungen zu erstellen.

Wie unterscheidet sich Vue 3 Responsive System von Vue 2?

Das Responsive -System von

Vue 3 wurde mithilfe des Proxy -Objekts von JavaScript vollständig umgeschrieben und bietet eine effizientere und leistungsfähigere Möglichkeit, Änderungen im Vergleich zum Objekt von Vue 2 zu verfolgen. DefineProperty -Methode. Dieses neue System ermöglicht Vue, Änderungen in verschachtelten Eigenschaften, eine Einschränkung von VUE 2, zu verfolgen. Es reduziert auch den Speicher Fußabdruck und verbessert die Leistung.

Wie verwendet ich Vue 3 Responsive System in meiner Anwendung?

Um das Vue 3 Responsive System zu verwenden, müssen Sie Ihre Daten mit der Funktion reactive () einwickeln. Diese Funktion macht das Objekt und seine Eigenschaften reagieren. Wenn sich die Eigenschaft ändert, wird VUE automatisch Komponenten, die davon abhängen, automatisch ausgeleitet. Sie können auch die Ref () -Funktion verwenden, um eine einzelne variable Reaktion zu erzielen.

Welche Rolle spielt die Ref -Funktion im Vue 3 -Reaktionsmechanismus?

Die Ref () -Funktion in

vue 3 wird verwendet, um ansprechende Verweise auf Werte zu erstellen. Es wickelt den Wert in ein Objekt mit einer einzelnen Eigenschaft ".Value" und macht dieses Objekt reaktionsschnell. Dies bedeutet, dass bei ändert der Wert wird eine Komponente, die diesen REF verwendete, aktualisiert.

Was ist der Unterschied zwischen Reaktiv und Ref in Vue 3?

reactive () und ref () werden verwendet, um Daten in Vue 3 reagieren zu lassen, sie werden jedoch in verschiedenen Szenarien verwendet. Die Funktion reactive () wird verwendet, um ein Objekt reaktionsschnell zu machen, während die Ref () -Funktion verwendet wird, um einen Basiswert wie eine Zeichenfolge oder eine Zahl anzusprechen. Ref () kann jedoch auch mit Objekten verwendet werden, in diesem Fall verhält es sich ähnlich wie reaktiv ().

vue 3 Wie kann man mit der Reaktionsfähigkeit eines Arrays umgehen?

vue 3 Die Reaktionsfähigkeit von Arrays entspricht denjenigen, die Objekte verarbeiten. Wenn Sie die Reactive () -Funktion verwenden, um das Array reaktionsschnell zu machen, ändert sich Vue -Tracks Änderungen an den Array -Elementen und deren Länge. Dies bedeutet, dass VUE, wenn Sie Elemente hinzufügen, löschen oder ersetzen, Komponenten aktualisiert, die von diesem Array abhängen.

Was ist die Torefs -Funktion im Reaktionsmechanismus?

Die Torefs () -Funktion in Vue 3 wird verwendet, um ein reaktionsschnelles Objekt in ein normales Objekt umzuwandeln, wobei jede Eigenschaft des ursprünglichen Objekts als Ref dargestellt wird. Dies ist nützlich, wenn Sie ein reaktionsschnelles Objekt dekonstruieren möchten, es aber dennoch reaktionsschnell halten möchten.

Wie können Objekte in Vue 3 verhindern, dass sie reagieren?

Sie können die Funktion markraw () verwenden, um zu verhindern, dass das Objekt reagiert. Dies ist in einigen Fällen nützlich, in denen VUE nicht die Änderungen des Objekts verfolgen soll.

vue 3 Was ist die berechnete Funktion im Reaktionsmechanismus?

Die Funktion contcuted () in Vue 3 wird verwendet, um eine reaktionsschnelle Eigenschaft zu erstellen, die von anderen reaktionsschnellen Eigenschaften abhängt. Der Wert der berechneten Eigenschaft wird automatisch aktualisiert, wenn sich die Abhängigkeiten ändern. Dies ist sehr nützlich für Berechnungen oder Transformationen, die bei Änderungen der zugrunde liegenden Daten aktualisiert werden sollten.

vue 3 Wie kann ich mit der Reaktionsfähigkeit von MAP und SET umgehen?

Das Responsive System von

Vue 3 unterstützt die Karte von JavaScript und setzen Sie Datenstrukturen. Wenn Sie eine Karte vornehmen oder reaktionsschnell festlegen, verfolgt Vue -Verfolgung Änderungen an den Einträgen bzw. Elementen. Dies bedeutet, dass VUE, wenn Sie einen Eintrag oder ein Element hinzufügen, löschen oder ersetzen, Komponenten aktualisiert, die von MAP oder SET abhängen.

Das obige ist der detaillierte Inhalt vonVerständnis des neuen Reaktivitätssystems in Vue 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!