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.
Die Methoden
• ,
und
• 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
bieten Entwicklern Tools, um dynamischere und reaktionsf?higere Anwendungen zu erstellen, indem Abh?ngigkeiten und Nebenwirkungen effektiv behandelt werden.
• 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
W?hrend Vue 3 Responsive System Vorteile hat, wird es nur in ES6 -Umgebungen unterstützt, und Responsive Proxy und ursprüngliche Objekte unterscheiden sich im Identit?tsvergleich.
• 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)
?ndern

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>

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
    }
  }
});

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)
    }
  }
});

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')

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.

<script> import { ref, reactive, readonly, markRaw, isRef, isReactive, isReadonly, isProxy, onMounted } from 'vue'; export default { setup() { const counter = ref(0) const person = reactive({ name: 'David', age: 36 }) const math = readonly({ PI: 3.14 }) const alphabetNumbers = markRaw({ A: 1, B: 2, C: 3 }) const showValue = () => { alert(`The value of B is ${alphabetNumbers.B}`) } onMounted(() => { console.log(isRef(counter)) // true console.log(isReactive(person)) // true console.log(isReadonly(math)) // true console.log(isProxy(alphabetNumbers)) // false }) return { counter, person, math, alphabetNumbers, showValue } } }; </script>

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>

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
eingepackt ist
• 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
verfügbar
• 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>

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:

ISREF prüft, ob der Wert ein Ref -Objekt ist.
isreactive prüft, ob es sich bei dem Objekt um einen reaktiven Proxy handelt, der durch Reaktiv erzeugt wird, oder wird erstellt, indem ein anderer durch Reaktiv erstellter Proxy geschaltet wird.
isReadonly prüft, ob es sich bei dem Objekt um einen von Readonly erstellten stellvertretenden Proxy handelt.
iSProxy prüft, ob es sich bei dem Objekt um einen Proxy handelt, der von reaktiv oder readonly erstellt wurde.

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>

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
    }
  }
});

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>

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!