はじめに
KnockoutJSとの違い
Vue.jsと同じく、MVVMを設計基盤とした先発のフレームワークに
KnockoutJSがあります。
Vue.jsに対するKnockoutJSの唯一のアドバンテージはレガシー・ブラウザ
のサポートです。
レガシー・ブラウザにあわせて設計されていることもあり、KnockoutJSの
記法や構文は若干シンプルではありません。
後発のVue.jsのほうが記法や構文を含め、洗練されています。
KnockoutJSはMS勤務の開発者により開発・メンテンスされ、
Visual Studioでも採用されているため、数多くの企業内業務
システムで採用されていると考えられます、企業内業務システム
では稼働しているシステムの動作環境の変更が許可されることは
ないため、レガシー・ブラウザが淘汰されるまでレガシー・
ブラウザのサポートが継続されることはほぼ確実であり、企業内
業務システムの開発エンジニアが保守的傾向が強く変化を好まない
こともあり、構文や記法が今以上にシンプルになることはないと
思われます。
設計の違い
ブラウザー・サポート
KnockoutJSはレガシー・ブラウザをサポートしています。
Class指向
KnockoutJSはClass指向にふれていますが、オーソドックスなスタイルの
名残が所々にあります。例えば、クラスの設計において何をプロパティとして
扱い何をメソッド(メンバー関数)の引数として扱うかが整理されていないよう
にみえます。
Vue.jsはClass指向で設計されているため、設計はKnockoutJSより
洗練されています。
記法の違い
Vue.jsはモダン・ブラウザのみをターゲットにすることにより、
KnockoutJSよりも記法をシンプルにすることに成功しています。
VMとバインディング
KnockoutJSではプロパティ(変数)は追加時or後、バインディングできる
プロパティであることを用意された関数を呼び出す形で明示する(より正確
にはES5で導入された機能を利用できないためにプロパティにセットする
オブジェクトに対して(値の変更のトラッキング機能と)セッター・ゲッター
を付加する専用の関数を呼び出す)必要があります、Vue.jsではプロパティ
はView Modelに追加するだけでバインディング可能になります。
KnockoutJSではバインディング可能なプロパティに対するアクセサが
専用の関数を呼び出すことにより自動生成されます、モダン・ブラウザの
サポートするES5以降の機能を利用できないためにアクセサは関数と
なっています。
Vue.jsでもプロパティに対する(トラッキング機能と)アクセサは
自動生成されます、ES5の機能を利用して自動生成されたアクセサ
はプロパティへのダイレクト・アクセスのように扱えます。
KnockoutJSでもKnockout-ES5プラグインを導入すれば、プロパティを
追加するだけでバインディング可能、かつ、アクセサをプロパティへの
ダイレクト・アクセスにできますが、Knockout-ES5プラグインはモダン
・ブラウザ用であり、レガシー・ブラウザを切り捨てられない場合は
利用できません。
(Knockout-ES5プラグインはプロパティまわりをES5の機能を用いて
置き換えるだけで、内部構造にはタッチしませんので、導入しても
モダン・ブラウザに導入されたJS(ES5)の他の新機能の恩恵を受けられる
わけではありません。)
Knockout-ES5: a plugin to simplify your syntax
http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/
バインディング
KnockoutJSのバインディングに相当する機能をVue.jsでは
ディレクティブとよびます。
KnockoutJSではViewに記述するバインディングの記法も
Vue.jsのディレクティブほどシンプルではなく、種類別の
整理も行なわれていません。
Vue.jsのディレクティブでは種類毎に独自属性が用意され、
KnockoutJSよりも見通しがよくなっています。
KnockoutJSのカスタム・バインディングに相当する機能は
Vue.jsではカスタム・ディレクティブです。
Vue.jsのカスタム・ディレクティブはKnockoutJSの
カスタム・バインディングと機能的には同等ですが、
作成が楽になっています。
テンプレート
KnockoutJSではtemplateバインディングを用いて、
指定した要素の中身をテンプレートで差し替えることが
できますが、AngularJSのディレクティブに相当する
機能は用意されていません。
Vue.jsには、AngularJSのディレクティブに相当する、
独自タグを定義できる機能、コンポーネント(component)
があります。
学習コスト
KnockoutJSは学習コストがAngularJS1.xよりかなり少ないですが、
Vue.js はより少ないです。
学習コストはAngular >> Knockout > Vue.js です。