はじめに
AngularJS(1.x)との違い
設計の違い
AngularJSはMVC(厳密にはMVW?)、対してVue.jsはMVVM、Viewと
Controllerの間にView Model(VM)を挟み、AngularJSのように
Controllerと画面(View)を対応させるのではなく、
VMと画面(厳密には画面のUIコンテナ(コンポーネント))を
対応させています。
Vue.js(というかMVVM)ではControllerは隠蔽されています。
AngularJSはController駆動(ドリブン)、Vue.jsはModel駆動
といえると思います。
AngularJSは大規模アプリを想定しているため、中小規模アプリでは
高コストすぎる機能も本体に含んでいますが、Vue.jsは必要な機能
のみを組合せて利用することを前提としているのか、いらない機能は
本体に含まず、本体はViewまわりのみの最少構成を維持する方向と
なっています。
(上記はMVC・MVVMの解説ではありません、Vue.jsとAngularJSの
しくみの違いについて書いているのみです。MVC・MVVMについて
詳しく知りたければ、Wikipedia等をあたるのが正解です。)
MVVM
DI(Dependency Injection)とバインディング
AngularJSではControllerとViewのバインディングを行っています
が、Vue.jsはView Model(VM)とViewでバインディングを行っています。
AngularJSではデータと振る舞いがControllerとModelに分離されて
いるため、画面のUIコンテナ(コンポーネント)のルート要素に
Controllerを紐付けた上でController経由でModelを画面と紐付ける
形になりますが、Vue.jsではVMにデータと振る舞いを一元化している
ので、画面のUIコンテナ(コンポーネント)にVMを紐付るだけで済みます。
ViewとVMのバインディングはVue.jsにより管理されるため、
VMを隠蔽されたControllerとは切り離して考えることができます。
Vue.jsではフォームの入力系要素の値はVMとViewの
間で適切に紐付けを行っていると、VM⇔View間で自動的に
同期されます。
AngularJSではデータと振る舞いが別々に存在し、それらとView
を繋ぐ糊が必要であるため、DI(Dependency Injection)機能を
標準搭載していますが、Vue.jsではViewとVMの間でデータと振る舞い
の紐付けを完結できるので、DI機能は標準搭載されていません。
Modelの扱い
AngularJSではModelは基本、振る舞いを持たないデータの入れものに
すぎませんが、Vue.jsのView Modelはデータと振る舞いを
持っています。
Web Components
PolymerとWebComponents
http://steps.dodgson.org/b/2013/05/19/polymer-and-web-components/
AngularJS(1.x)はWeb Components仕様及びそのPolyfill実装
であるPolymerを考慮していないため、組合せての利用では
問題があることが指摘されていて、2.0でWeb Components仕様
及びPolymer(のPlatform.js?)への対応が予定されていました。
Vue.jsでは0.11.xでWeb Components最新？仕様との同調？が予定
されていました。
コンポーネント指向
Vue.jsはAngularJS(1.x)とは違い、既存のor新規作成した
UIコンポーネントを組合せてページを構成することを前提に
しています。
Class指向
AngularJS(1.x)はClassベースではありませんが、
Vue.jsはClass指向となっています。
AngularJS(1.x)についてはAngular Classy を被せることにより
Classベースでの開発(Controllerまわりのみ)が
行えるようになります。
Angular Classy
http://davej.github.io/angular-classy/
Angular(JS)は2.0以降でClass(ES6ではなくTypeScript)ベースと
なっています。
ブラウザー・サポート
AngularJS(1.x)はレガシー・ブラウザをサポートしています。
Angular(JS)は2.0以降でレガシー・ブラウザを切り捨てていますが、
高速な動作が実現されているかは要検証です。
AngularJS(1.x)はレガシー・ブラウザーに特化した設計となっていて、
モダン・ブラウザ向けのチューニングを行う(モダン・ブラウザを用いて
高速化できる処理を切出し、レガシーブラウザとモダン・ブラウザで
処理を切換えられるようにする?)ことが難しい模様。
構文の違い
ディレクティブ (directive)
AngularJSとはディレクティブの定義が異なり、
Vue.jsのディレクティブは要素に付加できる独自属性
であり、この機能により、VMとViewの結びつけを行う
とともに、Vue.js組込みor独自定義したディレクティブ
を要素に付加することにより、要素を操作することが
できます。
AngularJS(1.x)ではHTML仕様による要素の属性毎に対応した独自属性を
用意していますが、Vue.jsは要素の属性をVMのデータと対応させるための
ディレクティブv-bind(旧v-attr)のみが用意されています、v-bindで
要素の属性(複数可)とVMのデータとの対応を記述するようになっています。
イベント操作も同様に、AngularJS(1.x)ではHTML仕様のイベント毎に
対応した独自属性を用意していますが、Vue.jsは要素のイベント(操作)を
VMのふるまい(メソッド)と対応させるためのディレクティブv-onのみが
用意されています、v-onで要素のイベント(複数可)とVMのメソッドとの
対応を記述するようになっています。
独自のディレクティブ(カスタム・ディレクティブ)を定義し
利用することも可能です。
コンポーネント(component)
Vue.jsのComponentはAngularJSのディレクティブに相当する
機能です。