Vue で ref と reactive をどう使い分けるか

Question

Vue 3 の Composition API では ref と reactive の両方がリアクティブ state を作る。学習初期や実務実装で、どういう判断軸で使い分けるべきか。

Answer

第一の判断軸は、1つの値を明示的に持ちたいか、複数プロパティを持つまとまりをオブジェクトとして扱いたいか だ。

ref は単一値の状態セルとして理解しやすく、Composition API の基本単位として扱いやすい。template で自動 unwrap されるため、UI とも素直につながる。computed や watch の入力としても明快で、初学者にはまず ref を基準に考える方が混乱が少ない。

一方 reactive は、複数フィールドを持つオブジェクト状態をまとめて扱いたい時に自然だ。ただし分割代入や参照の切り出しでリアクティブ性を見失いやすく、学習初期は落とし穴が多い。

したがって現時点の実践的な指針は次の通り。

• 単一値、フラグ、入力値、選択値 → ref
• 関連する複数フィールドを1つのオブジェクトとして扱いたい → reactive
• 迷ったらまず ref で表現できないか考える

本質的には、どちらも Vue reactivity の上に乗っている。違いは「状態の見せ方」と「扱いやすさ」であり、能力差ではない。

Evidence / Linked Notes

• Vue Reactivity
• Vue ref
• Reactivity Fundamentals - リアクティビティの基礎

Follow-up Questions

• reactive を分割して使いたい時は toRefs をどう位置づけるか
• shallowRef や shallowReactive をどの段階で導入すべきか