Vueを学ぶ

第2章. Vueの仕組み：基本

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前章では、Vueアプリケーションを構築するために不可欠なツールを学び、最初のVueアプリケーションを作成し、次のステップであるVueコードを書いてVueの仕組みを学ぶ準備をした。

この章では、Virtual Document Object Model（Virtual DOM）の概念と、Vue Options APIを使用したVueコンポーネントの書き方の基礎を紹介する。また、VueディレクティブとVueのリアクティビティ機構についても説明する。この章の終わりには、Vueの仕組みを理解し、アプリケーションで使用するVueコンポーネントを書いて登録できるようになる。

仮想DOMの裏側

Vueはドキュメント・オブジェクト・モデル（DOM）を直接操作しない。その代わりに、仮想DOMを実装し、ランタイム におけるアプリケーションのパフォーマンスを最適化する。

仮想DOMがどのように機能するかをしっかり理解するために、まずDOMの概念から始めよう。

DOMは、ウェブ上のHTML（またはXML）文書コンテンツを、インメモリ・ツリー状のデータ構造で表現する（図2-1参照）。DOMはWebページと実際のプログラミングコード（JavaScriptなど）をつなぐプログラミングインタフェースとして機能する。HTML 文書の<div> や<section> などのタグは、プログラ ミング・ノードやオブジェクト として表現される。

図2-1. DOMツリーの例

ブラウザがHTMLドキュメントを解析した後、DOMはすぐにインタラクションが可能になる。レイアウトが変更されると、ブラウザはバックグラウンドで常にDOMをペイントし、再ペイントする。私たちは、このプロセスを解析し、DOMをスクリーン・ラスタライズまたはpixel-to-screenパイプラインと呼んでいる。図2-2は、ラスタライズがどのように機能するかを示している ：

図2-2. ブラウザのラスタライズ処理

レイアウト更新問題

各ペイントはブラウザのパフォーマンスにとってコストがかかる。DOMは多数のノードで構成されているため、単一ノードや複数ノードのクエリや更新は非常に高価になる可能性がある 。

以下は、DOM内のli 要素のリストの単純な例である：

<ul class="list" id="todo-list">
  <li class="list-item">To do item 1</li>
  <li class="list-item">To do item 2</li>
  <!--so on…-->
</ul>

li 要素の追加・削除や内容の変更には、document.getElementById （またはdocument.getElementsByClassName ）を使ってその項目のDOMをクエリする必要がある。その後、適切なDOM APIを使用して必要な更新を実行する必要がある。 ...