Was sind die beiden Kerne von vue.js?

Vue.js ist eine Bibliothek, die eine bidirektionale Bindung von MVVM-Daten ermöglicht und sich auf die UI-Ebene konzentriert. Die Kernidee ist: datengesteuertes Komponentensystem.

Datengesteuert:

Vue.js Datenbeobachtungsprinzip wird technisch mithilfe von ES5Object.defineProperty und Speichereigenschaften implementiert: Getter und Setter (also nur mit IE9 und höher kompatibel) kann als Beobachtungsmechanismus bezeichnet werden, der auf der Sammlung von Abhängigkeiten basiert. Der Kern ist VM, nämlich ViewModel, das die Konsistenz von Daten und Ansichten gewährleistet.

Watcher: Jeder Befehl verfügt über ein entsprechendes Objekt zum Beobachten von Daten, das als Watcher bezeichnet wird, z. B. v-text="msg", {{ msg }}. Zu den Watcher-Objekten gehören zwei Zugehörige DOM-Elemente, die gerendert werden sollen.

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Prinzip des Beobachtungsmechanismus basierend auf der Abhängigkeitssammlung:

1 Transformieren Sie die nativen Daten in ein „beobachtbares Objekt“. Rufen Sie normalerweise defineProperty auf, um die Daten in zu ändern Datenobjekt ist ein Speicherattribut. Ein beobachtbares Objekt kann einen Wert-Getter oder einen Wert-Setter haben.

2 Beim Parsen der Vorlage, also während des Auswertungsprozesses des Beobachters, registriert jedes ausgewertete beobachtbare Objekt den aktuellen Beobachter als eigenen Abonnenten und wird zu einer Abhängigkeit des aktuellen Beobachters.

3 Wenn einem abhängigen beobachtbaren Objekt ein Wert zugewiesen wird, benachrichtigt es alle Watcher, die es selbst abonniert hat, um eine Neubewertung durchzuführen und entsprechende Aktualisierungen auszulösen, d. h. die zugehörige DOM-Änderungsdarstellung im Watcher-Objekt.

Der Vorteil der Abhängigkeitserfassung besteht darin, dass Datenänderungen genau und proaktiv verfolgt werden können, ohne dass alle Beobachter im Bereich manuell ausgelöst oder ausgewertet werden müssen (Nachteile der Dirty-Check-Implementierung von Angular). Insbesondere für Arrays müssen Sie eine Variablenmethode (z. B. Push) verwenden, die das Array umschließt, um Änderungen im Array zu überwachen. Wenn Sie Attribute hinzufügen/löschen oder Elemente an bestimmten Positionen im Array ändern, müssen Sie auch bestimmte Funktionen aufrufen, z. B. obj.$add(key, value), um Aktualisierungen auszulösen. Dies wird durch die Sprachfunktionen von ES5 begrenzt.

Komponentensystem:

Die Benutzeroberfläche der Anwendung besteht vollständig aus Komponentenbäumen.

Registrieren Sie eine Komponente:

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

Kernoptionen der Komponente

1 Vorlage: Die Vorlage deklariert die Daten und das DOM, dem letztendlich angezeigt wird die Benutzerzuordnungsbeziehung zwischen ihnen.

2 Anfangsdaten (Daten): Der Anfangsdatenzustand einer Komponente. Bei wiederverwendbaren Komponenten ist dies normalerweise der private Status.

3 Akzeptierte externe Parameter (Requisiten): Daten werden über Parameter zwischen Komponenten übertragen und geteilt.

4 Methoden: Änderungsvorgänge an Daten werden im Allgemeinen innerhalb der Methoden von Komponenten durchgeführt.

5 Lifecycle-Hooks: Eine Komponente löst mehrere Lifecycle-Hook-Funktionen aus. Die neueste Version 2.0 hat die Namen der Lifecycle-Funktionen stark geändert.

6 Private Ressourcen (Assets): In Vue.js werden benutzerdefinierte Anweisungen, Filter, Komponenten usw. zusammenfassend als Ressourcen bezeichnet. Eine Komponente kann ihre eigenen privaten Ressourcen deklarieren. Private Ressourcen können nur von der Komponente und ihren Unterkomponenten aufgerufen werden.

Webpack ist ein Open-Source-Tool zum Erstellen von Front-End-Modulen. Es bietet eine leistungsstarke Loader-API zum Definieren der Vorverarbeitungslogik für verschiedene Dateiformate. Dies ist die Grundlage für das .vue-Suffix-Einzeldateikomponentenformular. Auf dieser Grundlage ermöglicht der von Youda entwickelte Vue-Loader daher die Integration der drei Elemente Vorlage, Stil und Logik in dieselbe Datei und bildet ein Einzeldateikomponentenformat mit dem Dateisuffix .vue, was die Projektarchitektur erleichtert und Entwicklungsreferenz.

Weitere Funktionen:

1 Asynchrone Batch-DOM-Aktualisierung: Wenn sich eine große Datenmenge ändert, werden alle betroffenen Beobachter in eine Warteschlange verschoben und jeder Beobachter Die Warteschlange wird nur einmal gedrückt. Diese Warteschlange wird beim nächsten Tick des Prozesses asynchron ausgeführt. Dieser Mechanismus kann redundante DOM-Vorgänge vermeiden, die durch mehrfache Änderungen an denselben Daten verursacht werden, und kann außerdem sicherstellen, dass alle DOM-Schreibvorgänge zusammen ausgeführt werden, um ein Layout zu vermeiden, das durch das Umschalten von DOM-Lese- und -Schreibvorgängen verursacht werden kann.

2 Animationssystem: Vue.js bietet ein einfaches, aber leistungsstarkes Animationssystem. Wenn sich die Sichtbarkeit eines Elements ändert, können Benutzer nicht nur einfach den entsprechenden CSS-Übergangs- oder Animationseffekt definieren, sondern auch eine umfangreiche JavaScript-Hook-Funktion verwenden für die Animationsverarbeitung auf niedrigerer Ebene. 3 Skalierbarkeit: Zusätzlich zu benutzerdefinierten Anweisungen, Filtern und Komponenten bietet Vue.js auch einen flexiblen Mixin-Mechanismus, der es Benutzern ermöglicht, gemeinsame Funktionen in mehreren Komponenten wiederzuverwenden.

Das obige ist der detaillierte Inhalt vonWas sind die beiden Kerne von vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!