Question 1

Vue のリアクティビティシステムとは何ですか？

Accepted Answer

Vue のリアクティビティシステムは、データの変更を自動的に検出し、それに応じて DOM を更新します。プロパティへのアクセスや変更をインターセプトする JavaScript の Proxy に依存しています。このシステムにより、手動の介入なしでユーザーインターフェースがアプリケーションの状態と同期し続けることが保証されます。

Question 2

ref() と reactive() の主な違いは何ですか？

Accepted Answer

ref() はプリミティブ値またはオブジェクトに対するリアクティブな参照を作成し、.value を介してアクセスします。一方 reactive() はオブジェクトのリアクティブな proxy を作成し、プロパティへのアクセスに .value を必要としません。ref() は汎用的で（プリミティブ＋オブジェクト）、単純な値に最適ですが、reactive() はオブジェクトに最適化されている一方でプリミティブには使えません。実務では、すべての型で動作するため ref() がよく好まれます。

Question 3

template と script で ref の値にアクセスするにはどうすればよいですか？

Accepted Answer

template では Vue が ref を自動的にアンラップするため、.value なしで直接アクセスできます（例: {{ count }}）。script では ref の値を読み書きするために .value を使う必要があります（例: count.value++）。template でのこの自動的な挙動はコードの記述を簡潔にしつつ、JavaScript のロジックでは明示的な制御を保ちます。

Vue のリアクティビティ