triggerRef() 浅い ref の更新を手動でトリガーする

最終更新：2026-10-22

triggerRef() は shallowRef に紐づく副作用を手動でトリガーします。内部の変更を Vue が追跡できないときに通知を補うための抜け道です。

📝 構文

big.value.list.push(1)  // 発火しない
triggerRef(big)          // 手動で発火

shallowRef	更新をトリガーしたい浅い ref

戻り値：なし

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

出力：

Each click increments the length (without triggerRef it would stay at 1).

⚠️ 注意 浅い ref / 浅いリアクティブでのみ必要です。深い通常の ref は自動で追跡するため、手動の補足は不要です。

ℹ️ 補足 サードパーティライブラリの内部状態など、外部の可変データソースが変わった後に UI を同期できます。

Q 丸ごと置き換えの代わりに使えますか？

A 使えますが、丸ごと置き換えるほうが意味が明確で、リアクティブな考え方にも合っています。triggerRef は補助的な手段です。

Q 通常の ref に使うとどうなりますか？

A 一応更新がトリガーされますが、通常は不要です。

Q 余分なレンダリングが起きますか？

A 起きます。依存する副作用が再実行されるため、頻繁に呼び出すのは避けてください。

Web-Tutorial 技術チーム

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