はじめに
KnockoutJSとの違い
Vue.jsと同じく、MVVMを設計基盤とした先発のフレームワークにKnockoutJSがあります。
Vue.jsに対するKnockoutJSの唯一のアドバンテージはレガシー・ブラウザのサポートです。
レガシー・ブラウザにあわせて設計されていることもあり、KnockoutJSの記法や構文は若干シンプルではありません。
後発のVue.jsのほうが記法や構文を含め、洗練されています。
KnockoutJSはMS勤務の開発者により開発・メンテンスされ、Visual Studioでも採用されていたため、数多くの企業内業務システムで採用されていたと考えられます、企業内業務システムでは稼働しているシステムの動作環境の変更が許可されることは先ずないため、レガシー・ブラウザが淘汰されるまでレガシー・ブラウザのサポートが継続されることはほぼ確実であり、企業内業務システムのシステムエンジニアが保守的傾向が強く変化を好まないこともあり、構文や記法が今以上にシンプルになることはないと思われます。
設計の違い
ブラウザー・サポート
KnockoutJSはレガシー・ブラウザをサポート
しています。
Class指向
KnockoutJSはClass指向にふれていますが、オーソドックスなスタイルの名残が所々にあります。例えば、クラスの設計において何をプロパティとして扱い何をメソッド(メンバー関数)の引数として扱うかが整理されていないようにみえます。
Vue.jsはオブジェクト指向で設計されているため、設計は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(1.x)のディレクティブに相当する、独自タグを定義できる機能、コンポーネント(component)があります。
学習コスト
KnockoutJSは学習コストがAngularJS1よりかなり少ないですが、Vue.js はより少ないです。
学習コストはAngular >> Knockout > Vue.js です。