Vueの仕組み：リアクティブシステムと再描画を理解する – 2/12

Vueを理解する鍵は「リアクティブ（反応する）なデータ」です。内部実装の詳細よりも、開発者がバグらせないための考え方に絞って説明します。

リアクティブとは

Vueではデータ（state）が変わると、依存しているUIが自動で更新されます。これをリアクティブと呼びます。

開発者がやることは基本的に次の2つです。

• データを宣言する（ref / reactive）
• データを更新する（.value など）

更新の差分反映やDOM操作はVueが担当します。

ref と reactive の役割（概要）

Vue 3では ref と reactive がよく使われます。

• ref：プリミティブ（数値/文字列/真偽）や単一値に向く
• reactive：オブジェクトをまとめてリアクティブにする

学習の最初は ref を中心に進めると分かりやすいです。

再描画の考え方

Vueでも「データ→UI」の関係が基本です。テンプレートはデータに依存し、データが変わると必要部分が更新されます。

重要：

• テンプレート内で重い処理をしすぎない
• 依存関係が複雑なら computed を使う（後半で触れます）

練習問題

1. 「リアクティブ」とは何かを一文で説明しましょう。
2. ref と reactive の使い分けのイメージを説明しましょう。