Angularjs と Vue.js の違いは何ですか?簡単な比較

推奨される関連チュートリアル: 「angularjs チュートリアル 」

以下の理由により、Angular ではなく Vue を選択してください。もちろん、これはすべての人に適しているわけではありません。

Vue.js は API と設計の点で Angular よりもはるかにシンプルなので、すべての機能をすぐにマスターして開発に投資できます。

Vue.js は、より柔軟でオープンなソリューションです。これにより、Angular によって定められたルールに常に従うことなく、アプリケーションを希望どおりに編成できます。これは単なるビュー レイヤーであるため、必ずしも巨大な単一ページ アプリケーションにすることなく、既存のページに埋め込むことができます。これにより、他のライブラリと連携する余地が広がりますが、その分、アーキテクチャ上の決定をさらに行う必要があります。たとえば、Vue.js コアにはデフォルトではルーティングと Ajax 機能が含まれておらず、一般にアプリでモジュール ビルド システムを使用していることを前提としています。おそらくこれが最も重要な違いです。

Angular は双方向バインディングを使用し、Vue も双方向バインディングをサポートしますが、デフォルトは一方向バインディングであり、データは親コンポーネントから子コンポーネントに一方向で渡されます。大規模なアプリケーションでは一方向バインディングを使用して、データ フローを理解しやすくします。

Vue.js では、命令とコンポーネントがより明確に分離されています。ディレクティブは DOM 操作をカプセル化するだけですが、コンポーネントは独自のビューとデータ ロジックを備えた自己完結型の独立したユニットを表します。 Angular では、この 2 つの間に多くの混乱があります。

Vue.js はパフォーマンスが優れており、ダーティ チェックを使用しないため、最適化が非常に簡単です。スコープが変更されるたびにすべてのウォッチャーを再計算する必要があるため、ウォッチャーが増えると Angular はますます遅くなります。また、一部のウォッチャーが別の更新をトリガーした場合、ダイジェスト サイクルを複数回実行する必要がある場合があります。 Angular ユーザーは、ダーティ チェック ループの問題を解決するために難解な手法に頼ることがよくあります。場合によっては、多数のウォッチャーがあるスコープを最適化する簡単な方法が存在しないことがあります。

Vue.js では、依存関係の追跡と非同期キューの更新に基づく監視システムを使用しているため、この問題はまったく発生しません。すべてのデータ変更は、それらの間に明確な依存関係がない限り、独立してトリガーされます。必要な最適化は、v-for で track-by を使用することだけです。

Angularjs と Vue.js の使用の比較

以前のプロジェクトはすべて Angularjs を使用していました (ここでの主な焦点は Angularjs 1 であることに注意してください) Vue を初めて使用した後に短い比較メモを作成します.js 。
まず最初に、理論的にそれぞれの特徴について簡単に説明し、それからいくつかの小さな例を使用してそれらを説明しましょう。

Angular

• 1、MVVM(モデル)(ビュー)(ビューモデル)
• 2、モジュラー (Module) コントローラー (Contoller) 依存関係の注入:
• 3、双方向データ バインディング: インターフェイスの操作をリアルタイムにデータに反映でき、データの変更を画面に表示できます。リアルタイムのインターフェース。
• 4, 命令 (ng-click ng-model ng-href ng-src ng-if...)
• 5, サービス Service($compile $filter $interval $timeout $http ...)

双方向データ バインディングの実装では、$scope.$watch (ビューからモデル)、$scope.$apply (モデルからビュー) を使用して、$scope 変数のダーティ値検出を使用します。 View) 検出、内部呼び出しはダイジェストです。もちろん、ダーティ チェックのために $scope.$digest を直接呼び出すこともできます。データが頻繁に変更される場合、ダーティ検出はブラウザのパフォーマンスを大量に消費することに注意してください。公式の最大ダーティ検出値は 2000 データです。

Vue

vue.js 公式 Web サイト: ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイルのコンポーネントとライブラリを使用して開発された複雑な単一ページ アプリケーションを駆動する完全な機能を備えています。

Vue.js の目標は、可能な限りシンプルな API を通じて、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。

• (1) モジュール化 現在、最も注目されている方法は、ES6 モジュール化をプロジェクト内で直接使用し、それを Webpack と組み合わせてプロジェクトをパッケージ化することです。単一の拡張子 .vue を持つコンポーネント ファイルには、テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) が含まれています。
• (3) ルーティング、
• vue は非常に便利です。小さい, 圧縮後の最小ソース コードは 72.9kb、gzip 圧縮後はわずか 25.11kb で、Angular と比較すると 144kb です。ルーティング プラグインなどの必要なライブラリ プラグインを使用して自分で使用できます。 ins (Vue-router)、Ajax プラグイン (vue-resource) など。

コードはそのすぐ下にあります

最初のコードはもちろん 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";});

これに対し、vue は json データ形式を使用して書き込みますdom と data であり、書き方は js データのエンコード形式に基づいており、理解しやすいです。

Vue の双方向データ バインディング

<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  src="/static/imghwm/default1.png"  data-src="{{news.img}}"  class="lazy"  ng- / alt="Angularjs と Vue.js の違いは何ですか?簡単な比較" >        <div class="item-info">            <h3 id="news-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教程》

以上がAngularjs と Vue.js の違いは何ですか?簡単な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。