angularjs と vuejs の違いは何ですか-フロントエンドQ&A-php.cn

違い: 1. Angularjs は「ダーティ値検出」を使用してデータが変更されたかどうかを比較し、双方向のデータバインディングを実現しますが、vue は「データハイジャック」と「パブリッシャー/サブスクライバーモード」を組み合わせた方法を使用して、双方向のデータバインディングを実現します。双方向のデータバインディング。 2. vue 命令は「v-」演算子を使用し、angularjs 命令は「ng-」を使用します。

angularjs と vuejs の違いは何ですか

#このチュートリアルの動作環境: Windows7 システム、vue2.9.6&&Angular9 バージョン、DELL G3 コンピューター。

Angularjs と Vue.js の使用の比較

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

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

Angular

2、モジュール制御コントローラー (コントローラー)依存関係の注入:
3、双方向データバインディング: インターフェイスの操作をリアルタイムでデータに反映でき、データの変更をリアルタイムでインターフェイスに表示できます。
4, コマンド (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5, サービス Service($compile $フィルター $interval $timeout $http...)
6、ルーティング (ng-Route ネイティブルーティング)、ui-router (ルーティングコンポーネント)
7、Ajax カプセル化 ($http)

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

Vue

vue.js 公式 Web サイト: ユーザーインターフェイスを構築するための

進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、単一ファイルコンポーネントと Vue エコシステムでサポートされるライブラリ を使用して開発された複雑な単一ページアプリケーションを駆動する能力を十分に備えています。 Vue.js の目標は、可能な限りシンプルな API を介して レスポンシブデータバインディング

と

合成ビューコンポーネントを実装することです。 (1) モジュール化現在、最も注目されている方法は、ES6 モジュール化をプロジェクト内で直接使用し、それを Webpack と組み合わせてプロジェクトをパッケージ化することです。テンプレート (html コード)、スクリプト (es6 コード)、スタイル (css スタイル) を含む、コンポーネントサフィックス .vue を持つ単一のファイル

(4) コマンド (v-html v-bind v-model v-if/v-show...)
(5) ルーティング (vue-router)
(6) vuex データ共有
(7) Ajax プラグイン (vue-resource、axios)
vue は非常に小さく、圧縮後の最小ソースコードは 72.9 gzip圧縮後 kb Angularに比べて144kbの25.11kbしかありませんルーティングプラグイン(Vue-router)、Ajaxプラグイン(vue)など必要なライブラリプラグインを組み合わせてご自身でご利用いただけます-resource、axios) など。

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

angular .js:

ダーティ値チェック

angular.js は、ダーティ値検出を使用して、データが変更されたかどうかを比較し、ビューを更新するかどうかを決定します。最も簡単な方法は、定期的にポーリングすることです。 setInterval() を介してデータ変更を検出します。もちろん、Google はそれほど遅くはありません。Angular は、指定されたイベントでのデータ変更のみを検出できます。トリガーされたときにダーティ値検出を入力します。おおよそ次のようになります:

DOMユーザーによるテキストの入力、ボタンのクリックなどのイベント。 (ng-click)

XHR 応答イベント ($http)

ブラウザ位置変更イベント ($location)
タイマーイベント ($timeout, $interval)
$digest() または $apply() を実行します
vue

データハイジャック

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

最初のコードはもちろん 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 とデータを書き込み、書き込みスタイルは 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 を提供します。一般に、(ng-) を使用する angularjs 命令と比較して、Vue 命令は (v-) 演算子を使用します。その中で、vue.js は命令の省略形もサポートしています:

(1) イベントクリック

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

简写方式：
<a @click="fn"></a>

(2)属性

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

简写方式：
<a :href="url"></a>

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;)
    }
});