Attributantwort
Im vorherigen Abschnitt Attribut-Binding haben wir den einfachen Mechanismus der Attribut-Reaktivität vorgestellt, also wie man den Wert einer Komponenteneigenschaft in einer Textanzeige rendert.
ofa.js unterstützt nicht nur die Reaktivität von grundlegenden Eigenschaftswerten, sondern auch das reaktive Rendering von inneren Eigenschaftswerten von mehrschichtig verschachtelten Objekten.
count: {{count}}
count2: {{obj.count2}}
Alle Daten, die an ein ofa.js-Instanzobjekt gebunden werden, werden automatisch in reaktive Daten umgewandelt. Reaktive Daten unterstützen nur primitive Datentypen wie Strings, Zahlen, boolesche Werte, Arrays und Objekte. Für komplexe Datentypen wie Funktionen oder Klasseninstanzen müssen diese als nicht-reaktive Eigenschaften gespeichert werden, da Änderungen an diesen Eigenschaften keine erneute Komponentenrenderierung auslösen.
Nicht-responsive Daten
Manchmal müssen wir Daten speichern, die nicht reaktiv aktualisiert werden müssen, wie beispielsweise Promise-Instanzen, reguläre Ausdrücke oder andere komplexe Objekte. In solchen Fällen müssen nicht-reaktive Eigenschaften verwendet werden. Änderungen an diesen Eigenschaften lösen kein erneutes Rendern der Komponente aus und eignen sich daher für die Speicherung von Daten, die keine Verknüpfung mit der Ansicht erfordern.
Die Benennung nicht-reaktiver Eigenschaften erfolgt in der Regel durch das Voranstellen eines Unterstrichs _ vor den Eigenschaftsnamen, um sie von reaktiven Eigenschaften zu unterscheiden.
count: {{count}}
count2: {{_count2}}
Beim Klicken der Schaltfläche Green增加 ist der Wert von _count2 zwar tatsächlich erhöht worden, da es sich jedoch um eine nicht-reaktive Eigenschaft handelt, wird keine Aktualisierung der Ansicht ausgelöst, und die Anzeige in der Benutzeroberfläche bleibt daher unverändert. Beim Klicken der Schaltfläche Blue增加 hingegen handelt es sich bei count um eine reaktive Eigenschaft, wodurch eine vollständige Neurenderung der Komponente ausgelöst wird und erst dann der Inhalt von Green synchron aktualisiert wird.
Nicht-reaktive Objektdaten haben eine bessere Leistung als reaktive Objektdaten, da nicht-reaktive Daten keine erneute Renderung der Komponente auslösen.