toRaw() 元のオブジェクトを取り出す

最終更新:2026-10-22

toRaw() 元のオブジェクトを取り出す

toRaw() はプロキシの背後にある元のオブジェクトを返します。リアクティブな追跡を回避したいときや、データを外部ライブラリに渡したいときに使います。

グループリアクティビティ: 応用
種類API
スコープコンポーネント内
Vue バージョン3.0+
SSR 対応対応

📝 構文

const raw = toRaw(proxy)
raw.count = 5   // 変更しても更新はトリガーされない(追跡の外)

⚙️ 引数

proxyreactive / readonly のプロキシまたは ref

戻り値:プロキシ化されていない元のオブジェクト

▶ 例

以下のコードを編集して結果を確認しましょう:

出力:

Shows 'same as original: true'.

💡 ポイント

ℹ️ 補足 定番の用途は、グラフやマップ系のサードパーティライブラリにデータを渡してプロキシの干渉を避けることや、オブジェクトの同一性比較です。
⚠️ 注意 元のオブジェクトを変更してもビューは更新されません。「サイレントな変更」でビューとデータが食い違うため、リアクティブの迂回には使わないでください。
関連ケースは近日公開予定。

📚 関連チュートリアル

❓ よくある質問

Q サードパーティライブラリにはなぜ必要なのですか?
A オブジェクトの同一性や内部構造で状態を判定するライブラリでは、プロキシが原因で異常動作や余分なオーバーヘッドが起きることがあります。
Q ref に対して使うと何が返りますか?
A ref 内部の元の値(内部がオブジェクトならその元のオブジェクト)が返ります。
Q markRaw の代わりになりますか?
A なりません。toRaw は取り出し、markRaw は対象を二度とプロキシ化しないようマークします。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%