ref と reactive の違いは何ですか?

Question

Accepted Answer

どちらも Composition API で**リアクティブな状態**を作成しますが、動作は異なります。`ref` は**任意の**値（プリミティブを含む）をリアクティブなコンテナにラップします。一方、`reactive` は**オブジェクト**を直接深くリアクティブにします。 ## ref — 任意の値に対して、.value でアクセス ```vue ``` 重要な特性：JavaScript では ref に `.value` を通じてアクセスします。テンプレート内では Vue が自動的にアンラップします。スクリプト内で `.value` を忘れることが、最も一般的な初心者のバグです。 ## reactive — オブジェクト用、.value なし ```vue ``` `reactive` はオブジェクト/配列（プリミティブではない）にのみ機能し、プロパティは直接使用します。 ## reactive の落とし穴：destructure や再代入をしない ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy) const { count } = state; // ❌ destructuring loses reactivity ``` `reactive` オブジェクトを再代入したり、そのプロパティを destructure したりすると、リアクティビティから**切断**されます — よくある落とし穴です。`ref` にはこの問題がありません（`.value` を再代入するため）。 ## どちらを使うか ```text ref → primitives, and the recommended default (works for everything, easy to reassign) reactive→ when you want a grouped object of state without .value (but mind destructuring) ``` 多くのチームは一貫性のために**`ref` を至るところで**標準化しています。 ## なぜ重要なのか `ref` と `reactive` は Vue 3 の Composition API 状態の基礎です。スクリプト内で `ref` が `.value` を必要とし（テンプレート内では自動アンラップされる）、`reactive` が再代入/destructuring でリアクティビティを失うことを理解することで、Vue における最も一般的な 2 つのリアクティビティバグを防ぐことができます。