Vue.jsは、インタラクティブな（双方向性の）UIを構築するためのJavaScriptのフレームワーク。
MVVMモデルの設計思考（ソフトウェアアーキテクチャ）を採用している。
コンポーネント指向のUIを設計することができる。
MVVMモデルとは？
MVVMモデルとは、プログラムの処理を以下の3つの役割に分類して開発するモデル。
- Model
- View
- ViewModel
それぞれの頭文字を取ってMVVMモデルと呼ばれる。
基礎的なアーキテクチャであるMVC、及びViewとModelについてはこちらを参照。
ViewModel
ViewModelは、ModelとViewを紐付ける接着剤の役割。
- Viewからリクエストを受ける
- ViewModelにリクエストが反映される（ViewModelのデータが書き換えられる）
- Modelに処理を命令
- 書き換えられた値をViewに反映
という処理を行う。値の変更が即時的にViewに反映されるのが特徴である。脊髄反射的なイメージ。
データバインディング
MVVMモデルを支えるのが、データバインディングである。
データバインディングとはデータをバインド（結びつける）ことで、ViewとViewModelを結びつけることである。
データバインディングは、ViewとView Modelどちらかの値が変化するたびにViewとView Model、両方の値が変更される。
これが「データが双方向性を持って反映されるUI」を構築するVue.jsの最大の特徴である。
コンポーネント指向とは？
コンポーネント（Component）とは、部品という意味である。
コンポーネント指向とは、様々な機能をそれぞれ1つのコンポーネントとして切り出し、複数のコンポーネントを組み合わせることで、1つのサービス、アプリケーション、WEBサイトなどを作り上げる考え方である。
サービスをガンプラとすれば、コンポーネントは1つ1つのパーツである。ガンプラを組み立てるようにサービスを作り上げるのがコンポーネント指向である。
メリット
- 設計・開発・テストなどがコンポーネント単位でできる
- パーツを共通化することで、複数ページに渡る同じような実装を1つのコンポーネントで対応することができる
デメリット
- 表示されるページ数に対して必要なファイル数が多くなる
- コンポーネントが共通化されている場合、1つのコンポーネントを変更すると別のページで不具合が発生する可能性がある