AngularjsとVue.jsを使用した比較

この記事の内容は、Angularjs と Vue.js の使用の比較に関するものです。必要な友達はそれを参考にしてください。

Angularjs と Vue.js の使用の比較

以前のプロジェクトはすべて Angularjs を使用していました (この記事では主に Angularjs 1 について説明していることに注意してください)。 Vue.js。

まず最初に、理論的にそれぞれの特徴について簡単に説明し、それからいくつかの小さな例を使用してそれらを説明しましょう。

Angular

1、MVVM (モデル) (ビュー) (ビューモデル)

2、モジュラー (モジュール) コントローラー (コントローラー) 依存関係の注入:

3、双方向データ バインディング :インターフェースの操作をリアルタイムにデータに反映でき、データの変更をリアルタイムにインターフェースに表示できます。

4, コマンド (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

5, サービス Service($compile $filter $interval $タイムアウト $http...)
6、ルーティング (ng-Route ネイティブ ルーティング)、ui-router (ルーティング コンポーネント)
7、Ajax カプセル化 ($http)
双方向データを含むバインディング この実装では、$scope.$watch (ビューからモデル)、$scope.$apply (モデルからビュー) の検出を使用して、$scope 変数のダーティ値検出を使用します。内部呼び出しはダイジェストです。もちろん、$ を呼び出すこともできます。スコープを直接 .$digest はダーティ チェックを実行します。データが頻繁に変更される場合、ダーティ検出によりブラウザのパフォーマンスが大幅に消費されることに注意してください。公式の最大ダーティ検出値は 2000 データです。

• Vue

vue.js 公式ウェブサイト: ユーザー インターフェイスを構築するための
• 進歩的なフレームワーク

  のセットです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、

  単一ファイル コンポーネント
と
• Vue エコシステムでサポートされるライブラリ

  を使用して開発された複雑なシングルページ アプリケーションを強化することができます。

Vue.js の目標は、可能な限り単純な API を介して
• レスポンシブ データ バインディング

  と

  合成ビュー コンポーネント
を実装することです。

(1) モジュール化。現在、最もホットな方法は、プロジェクトで ES6 モジュール化を直接使用し、それをプロジェクトのパッケージ化に Webpack と組み合わせることです。

(2) コンポーネント化、接尾辞 . vue 、テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む (3) 双方向データ バインディング: インターフェイスの操作をリアルタイムでデータに反映でき、データの変化をリアルタイムでインターフェースに表示できます。

(4) コマンド (v-html v-bind v-model v-if/v-show...) (5) ルーティング (vue-router)

• (6) vuexデータ共有

• (7) Ajaxプラグイン(vue-resource、axios)

vue は非常に小さく、圧縮後の最小ソースコードは 25.11 kb で、必要なライブラリ プラグインを使用して自分で使用できます。ルーティング プラグイン (Vue-router) や Ajax プラグイン (vue -resource、axios) など

Vue と Angular 間の双方向データ バインディングの原則

angular.js: ダーティ値check

angular.js はダーティ値検出を使用して、ビューを更新するかどうかを判断します。最も簡単な方法は、setInterval() を通じてデータ変更を検出するために定期的にポーリングすることです。 Angular は、指定されたイベントがトリガーされた場合にのみダーティ値検出を開始します。これは、おおよそ次のとおりです:

• DOM イベント、たとえば、ユーザーがテキストを入力したり、ボタンをクリックしたりするなど。 (ng-click)

• ) または $apply()

• vue
:
• データハイジャック

vue.js は、データハイジャックをパブリッシャー/サブスクライバーモデルと組み合わせて使用​​し、次の方法で各プロパティのセッターをハイジャックします。 Object.defineProperty() ゲッターは、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニング コールバックをトリガーします。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

• コードはすぐ下にあります

最初はもちろんHello Worldです

vue

<p id="app">
  {{ message }}
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular

<p ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world";
});

それに比べて、Vue は json データ形式を使用して dom とデータを記述します。記述スタイルは、理解しやすい js データ エンコード形式に基づいています。

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

<p id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

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

<p ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
});

Vue は軽量のフレームワークですが、いくつかの便利な命令や属性操作を含む多くの API を提供します。ディレクティブ (ng-) を使用する angularjs ディレクティブと比較して、(v-) 演算子を使用します。その中で、vue.js は命令の省略形もサポートしています:

(1) イベント click

<a v-on: click="fn"></a>

略語:
< ;/a>

(2)属性

<a v-bind: href="url"></a>

• 略語:
  <a :href="url"></a>

vue.渲染列表

<p id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</p>

new Vue({
  el: '#app',
  data: {
    names: [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
  }
})

Angularjs渲染列表

<p ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [
      { first: 'summer', last: '7310' },
      { first: 'David', last:'666' },
      { first: 'Json', last:'888' }
    ]
});

vue的循环

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

angular和vue的渲染差不多

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

vue和Angular处理用户输入

<p id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

---

<p ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split('').reverse().join('')
    }
});

相关推荐：

AngularJS应用模块化的使用详解

Angular开发实践之服务端渲染_AngularJS

Vue.js的基础知识点总结

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