toRaw() 元のオブジェクトを取り出す
最終更新:2026-10-22
toRaw() 元のオブジェクトを取り出す
toRaw() はプロキシの背後にある元のオブジェクトを返します。リアクティブな追跡を回避したいときや、データを外部ライブラリに渡したいときに使います。
| グループ | リアクティビティ: 応用 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const raw = toRaw(proxy)
raw.count = 5 // 変更しても更新はトリガーされない(追跡の外)
⚙️ 引数
| proxy | reactive / readonly のプロキシまたは ref |
|---|
戻り値:プロキシ化されていない元のオブジェクト
▶ 例
以下のコードを編集して結果を確認しましょう:
出力:
Shows 'same as original: true'.
💡 ポイント
ℹ️ 補足 定番の用途は、グラフやマップ系のサードパーティライブラリにデータを渡してプロキシの干渉を避けることや、オブジェクトの同一性比較です。
⚠️ 注意 元のオブジェクトを変更してもビューは更新されません。「サイレントな変更」でビューとデータが食い違うため、リアクティブの迂回には使わないでください。
🏷️ 関連応用
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q サードパーティライブラリにはなぜ必要なのですか?
A オブジェクトの同一性や内部構造で状態を判定するライブラリでは、プロキシが原因で異常動作や余分なオーバーヘッドが起きることがあります。
Q ref に対して使うと何が返りますか?
A ref 内部の元の値(内部がオブジェクトならその元のオブジェクト)が返ります。
Q markRaw の代わりになりますか?
A なりません。toRaw は取り出し、markRaw は対象を二度とプロキシ化しないようマークします。