Vue ref

Definition

ref は、単一の値をリアクティブなコンテナとして包み、変更検知の対象にするための基本 API である。

Vue 3 を Composition API で書く時、最初に頻出する状態保持 API が ref だ。ここを曖昧にすると、template unwrap, script 内の .value, reactive との使い分けで混乱しやすい。

ref は primitive でも object でも扱えるが、学習初期では「1つの状態セルを持つ箱」として捉えるとわかりやすい。template では自動 unwrap されるが、script では .value を通してアクセスする。この二面性が Vue 特有の書き味を作る。

ref は単独で使うだけでなく、computed の入力、watch の監視対象、component 内 state の基本単位として現れる。そのため ref 単体の API 理解より、他概念との接続の中で覚える方が強い。