読書メモ Vue.jsを支える技術

Vue.jsを支える技術

以下、重要な３つの技術的バックグラウンド

1.コンポーネントシステム

• WebアプリケーションのUIは、それを構成する複数の部品の集まりだと考えることができる
• UIは、①データと、②そのデータを画面に表示するビュー、③データを変更するユーザーのアクションの3つから成り立つ
• これらのUIの部品を、UIコンポーネントという
• UIコンポーネントを効率よく扱う仕組みがコンポーネントシステム
• Vue.jsのコンポーネントとは、再利用可能なVueインスタンスのこと

2.リアクティブシステム

リアクティブシステムの説明。全然わからん

• リアクティブシステムとは、状態の変化をVue.jsが検知して自動的にDOM側に反映できるようにする仕組み
• リアクティブシステムは、コンポーネントレンダリングの骨格となる
• リアクティブシステムは、「変更と同時に各所を変更させたり、変更がどの箇所に影響を与えているかわかる」のが嬉しいっぽい
• リアクティブシステムは、リアクティブプロパティとウォッチャのセットによって実現

• リアクティブなデータバインディングとは、HTMLテンプレート内で対象となるDOM要素にバインディングを指定することで、Vue.jsがそのデータの変更を検出するたびに、バインディングされているDOM要素が自動で表示内容を変更する

• データの変更に応じて、ビューを更新する仕組みをデータバインディングという

• バインディングとは、あるものとあるものを紐づけるという意味で、Vue.jsの場合は、データと対象要素を結びつけるという意味

3.レンダリングシステム

• 仮想DOMによるDOMの高速なレンダリングを提供してる
• 仮想DOMとは、DOM操作を簡略化、高速化するための技術

感想

コンポーネントシステムの概念はなんとなくわかった。2と3は、よくわからんのでもう少し読み進めるぞ