toRefs() オブジェクトを ref の集まりに変換する
最終更新：2026-10-22
toRefs() オブジェクトを ref の集まりに変換する
toRefs() はリアクティブなオブジェクトの各プロパティを ref に変換します。分割代入後もリアクティビティが保たれる、reactive な状態を分割代入する際の標準的な方法です。
| グループ | リアクティビティ: ユーティリティ |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const state = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(state) // a、b とも ref で state と同期
a.value++ // state.a も +1 される⚙️ 引数
| object | リアクティブなオブジェクト（reactive プロキシ） |
|---|
戻り値：各キーが ref に対応した通常のオブジェクト（プロパティ名 → ref）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Both numbers move together — the destructured ref stays linked.💡 ポイント
💡 ヒント コンポーザブルから reactive な状態を返すときは toRefs を使うと、呼び出し側は安全に分割代入できます。
⚠️ 注意 reactive オブジェクトに対してのみ意味があります。通常のオブジェクトに使うと、互いに無関係な ref のスナップショットが得られるだけです。
ℹ️ 補足 setup から toRefs のオブジェクトを返すと、そのままテンプレートで使えます（テンプレートが自動でアンラップします）。
🏷️ 関連ユーティリティ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q toRefs を使わずに直接分割代入するとどうなりますか？
A その時点のスナップショット値が得られ、以降の元オブジェクトの変化は反映されず、ビューも更新されません。
Q ref に対して使えますか？
A 向いていません。ref はそれ自体がリアクティブな単位なので、そのまま使うか unref で値を取り出してください。
Q 変更は元のオブジェクトに書き戻されますか？
A 書き戻されます。同じプロパティへの双方向の通路になっているためです。
