🟠 1.2 状態と見た目を自動でつなぐ仕組み → なぜ Virtual DOM が必要？

✅ 【要点】

• 「データが変わったら画面が変わる」を自動化するには

  → どこが変わったのかを知る必要がある

• そのために Vue（や React）は

  → 画面の仮想的なコピー（Virtual DOM）を使って差分を計算している

• → 差分だけを最小限の DOM 操作で更新できる

• → パフォーマンスがよくなる、コードも簡単になる！

🟢 【まずは基本のおさらい】

🖥️ 普通の DOM 操作（手動でやるパターン）

1. データを持つ
2. それに合わせて innerHTML や textContent を書き換える

でもこれだと…

→ どこを変えたらいいのかは 人間が判断しないといけない

→ 複雑な画面になるほど、全部作り直したくなる（でもそれは重い）

🟣 【たとえばこんな UI】

<ul>
  <li>Alice</li>
  <li>Bob</li>
  <li>Charlie</li>
</ul>

このリストの順番を

[Alice, Bob, Charlie] → [Bob, Alice, Charlie]