2016.04 のVue.js 2.0の発表から早数ヶ月、 preview 版も alpha 8 まで洗練されもうじきbetaの声が聞こえてくるのでは…？ということで、ちょっとVue.js 2.0触ってみることにしました。
Sampleでみる性能比較
Vue.js 2.0 の開発は nextブランチにて開発が進められており、example や benchmarksのフォルダから幾つかのサンプルを確認する事が出来ます。
驚くべきことに、Vue.js 2.0 の記述は Vue.js 1.0 の記述とほとんど遜色の無いものとなっているため、パフォーマンスの比較検証なども、同じコードをそのままで検証することが可能となっています。
Vue.js 2.0 最大の特徴として仮想DOMの導入が上げられます。
Webコンパイラの導入で HTMLで記述したテンプレートが内部で自動的に仮想DOMへと変換されるとのことで、仮想DOMのためにJSXのような特殊な記述を覚える必要はありません。
以下にVue.js 1.0と2.0の比較のためのサンプルを用意しました。Benchmarks にあるSVGのサンプルコードを、アプリJS部分は全く同じコードで、Vue.js 1.0 版と Vue.js 2.0 版で公開し、パフォーマンスの比較が出来るようにしました。
Vue.js
Vue.js 2
全く同じコードで Vue.js 2.0 版の方が 10fps程度向上しているのは驚きです(手許比)。
Vue.js 2.0 と 1.0 のAPI変更一覧は、
https://github.com/vuejs/vue/issues/2873
に掲載されていますが、ほぼ主要な機能の全てが2.0でも生きているのが分かるかと思います。
手軽に2.0に移行しつつ、性能UPの恩恵に預かれるのは地味にありがたいなぁと思います。
仮想DOMで何が変わるのか
仮想DOMのメリットとしてSSRが出来るようになる、ということですので、その辺りもぼちぼち暇を見つけてサンプル制作など取り組んで行ければ良いなぁ…と思います。
まぁもともとミニマムなフレームワークということで、特に目新しい追加機能とかもなかったりするのですが、ベースの描画パフォーマンス性能向上と言うのはやはりありがたいです。
そろそろベータ公開されたりしないかなぁ。