Was sind die Unterschiede zwischen Angularjs und Vue.js? Einfacher Vergleich

Empfohlene Tutorials: „angularjs Tutorial“

Wählen Sie Vue anstelle von Angular aus folgenden Gründen, die natürlich nicht für jeden geeignet sind:

Vue.js ist sowohl hinsichtlich der API als auch des Designs besser. Viel einfacher als Angular, sodass Sie alle Funktionen schnell beherrschen und mit der Entwicklung beginnen können.

Vue.js ist eine flexiblere und offenere Lösung. Damit können Sie Ihre Anwendung so organisieren, wie Sie es möchten, ohne sich jederzeit an die von Angular festgelegten Regeln halten zu müssen. Es handelt sich lediglich um eine Ansichtsebene, sodass Sie sie in eine vorhandene Seite einbetten können, ohne sie unbedingt zu einer riesigen Einzelseitenanwendung zu machen. Es gibt Ihnen mehr Raum für die Zusammenarbeit mit anderen Bibliotheken, aber im Gegenzug müssen Sie mehr architektonische Entscheidungen treffen. Beispielsweise umfasst der Vue.js-Kern standardmäßig keine Routing- und Ajax-Funktionalität und geht im Allgemeinen davon aus, dass Sie in Ihrer App ein Modul-Build-System verwenden. Dies ist wahrscheinlich der wichtigste Unterschied.

Angular verwendet eine bidirektionale Bindung, und Vue unterstützt auch eine bidirektionale Bindung, aber die Standardeinstellung ist eine unidirektionale Bindung, und Daten werden von der übergeordneten Komponente in eine Richtung an die untergeordnete Komponente übergeben. Verwenden Sie in großen Anwendungen eine unidirektionale Bindung, um den Datenfluss verständlicher zu machen.

Anweisungen und Komponenten sind in Vue.js klarer getrennt. Direktiven kapseln nur DOM-Operationen, während Komponenten eine in sich geschlossene unabhängige Einheit darstellen – mit eigener Ansicht und Datenlogik. In Angular gibt es große Verwirrung zwischen den beiden.

Vue.js hat eine bessere Leistung und ist sehr, sehr einfach zu optimieren, da es kein Dirty Checking verwendet. Angular wird immer langsamer, wenn mehr Beobachter vorhanden sind, da bei jeder Änderung des Bereichs alle Beobachter neu berechnet werden müssen. Wenn einige Beobachter außerdem ein weiteres Update auslösen, muss der Digest-Zyklus möglicherweise mehrmals ausgeführt werden. Angular-Benutzer greifen häufig auf esoterische Techniken zurück, um das Problem der Dirty-Check-Schleifen zu lösen. Manchmal gibt es keine einfache Möglichkeit, ein Zielfernrohr bei einer großen Anzahl von Beobachtern zu optimieren.

Vue.js hat dieses Problem überhaupt nicht, da es ein Beobachtungssystem verwendet, das auf Abhängigkeitsverfolgung und asynchronen Warteschlangenaktualisierungen basiert. Alle Datenänderungen werden unabhängig voneinander ausgelöst, sofern keine klare Abhängigkeit zwischen ihnen besteht. Die einzige erforderliche Optimierung besteht darin, Track-by auf v-for zu verwenden.

Vergleich zwischen der Verwendung von Angularjs und Vue.js

Frühere Projekte verwendeten alle Angularjs (bitte beachten Sie, dass sich dieser Artikel hauptsächlich auf Angularjs bezieht). 1) Machen Sie nach der ersten Verwendung von Vue.js eine kurze Vergleichsnotiz.
Lassen Sie uns zunächst kurz theoretisch auf ihre jeweiligen Eigenschaften eingehen und diese dann anhand einiger kleiner Beispiele veranschaulichen.

Angular

• 1, MVVM (Modell) (Ansicht) (Ansichtsmodell)
• 2, Modular (Modul) Controller (Controller) Abhängigkeitsinjektion:
• 3, Zwei-Wege-Datenbindung: Schnittstelle Vorgänge können in Echtzeit in den Daten widergespiegelt werden und Datenänderungen können in Echtzeit in der Schnittstelle angezeigt werden.
• 4, Befehl (ng-click ng-model ng-href ng-src ng-if...)
• 5, Service Service ($compile $filter $interval $timeout $http...)

unter Die Implementierung der bidirektionalen Datenbindung verwendet die Erkennung schmutziger Werte von $scope-Variablen, wobei die Erkennung von $scope.$watch (Ansicht zu Modell) und $scope.$apply (Modell zu Ansicht) verwendet wird, und die internen Aufrufe sind Digest Of Natürlich kann $scope.$digest auch direkt zur Dirty-Prüfung aufgerufen werden. Es ist zu beachten, dass die Dirty-Erkennung bei sehr häufigen Datenänderungen viel Browserleistung beansprucht. Der offizielle maximale Wert für die Dirty-Erkennung beträgt 2000 Daten.

Vue

vue.js offizielle Website: Es ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und ist sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren. Vue hingegen ist vollständig in der Lage, komplexe Single-Page-Anwendungen zu steuern, die mit Single-File-Komponenten und Bibliotheken entwickelt werden, die vom Vue-Ökosystem unterstützt werden.

Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu implementieren.

• (1) Modularisierung ist derzeit die direkte Verwendung der ES6-Modularisierung im Projekt und die Kombination mit Webpack für die Projektverpackung.
• (2) Komponentisierung: Erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)
• (3) Routing,

vue ist sehr klein, der minimale Quellcode beträgt 72,9 KB nach der Komprimierung und nur 25,11 KB nach der GZIP-Komprimierung. Das sind im Vergleich zu Angular 144 KB. Sie können es selbst mit den erforderlichen Bibliotheks-Plug-Ins verwenden, z. B. Routing-Plug-Ins (Vue-Router), Ajax-Plug-Ins (Vue-Ressource) usw.

Der Code ist direkt unten

Das erste ist natürlich Hello World

vue

<div id="app">  {{ message }}</div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  }})

Angular

<div ng-app="myApp" ng-controller="myCtrl"> {{message}}</div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world";});

Im Vergleich dazu verwendet Vue das JSON-Datenformat zum Schreiben von Dom und Daten, und der Schreibstil ist mehr Basierend auf dem js-Datenkodierungsformat, das leicht zu verstehen ist.

Vues bidirektionale Datenbindung

<div id="app">  <p>{{ message }}</p>  <input v-model="message"></div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  }})

Angular的双向数据绑定

<div ng-app="myApp" ng-controller="myCtrl">  <p>{{message}}</p>  <input ng-model="message"></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world!";});

vue虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

• (1)事件click

  简写方式：

• (2)属性

  []（http://www.cnblogs.com/summer7310/p/url)）
  简写方式：

vue.渲染列表

<div id="app">  <ul>    <li v-for="name in names">      {{ name.first }}    </li>  </ul></div> new Vue({  el: &#39;#app&#39;,  data: {    names: [      { first: &#39;summer&#39;, last: &#39;7310&#39; },      { first: &#39;David&#39;, last:&#39;666&#39; },      { first: &#39;Json&#39;, last:&#39;888&#39; }    ]  }})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">  <li ng-repeat="name in names">{{name.first}}</li></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.names = [      { first: &#39;summer&#39;, last: &#39;7310&#39; },      { first: &#39;David&#39;, last:&#39;666&#39; },      { first: &#39;Json&#39;, last:&#39;888&#39; }    ]});

vue的循环

<ul>    <li v-for="item in list">        <a :href="item.url">{{item.title}}</a>    </li></ul>

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">    <a ng-href="#/content/{{news.id}}">        <img ng-src="{{news.img}}" />        <div class="item-info">            <h3 class="item-title">{{news.title}}</h3>            <p class="item-time">{{news.createTime}}</p>        </div>    </a></div>

vue和Angular处理用户输入

<div id="app">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  },  methods: {    reverseMessage: function () {      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }  }})

<div ng-app="myApp" ng-controller="myCtrl"> <p>{{ message }}</p> <button ng-click="reverseMessage()">Reverse Message</button></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world!";    $scope.reverseMessage = function() {        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }});

相关教程推荐：《angular教程》、《vue教程》

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen Angularjs und Vue.js? Einfacher Vergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!