Vue Academy · レッスン

高度なリアクティビティ：shallowRefとtriggerRef

パフォーマンス向けのshallowRef、リアクティビティから除外するmarkRaw、手動トリガー用のtriggerRef

「高度なリアクティビティ：shallowRefとtriggerRef」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

refとreactiveの先へ

Vueの深いリアクティビティは便利ですが、常に必要とは限りません。大きなオブジェクトや外部インスタンスでは、深い追跡が無駄になることがあります。Vueには、細かく制御するためのshallowRef、triggerRef、markRawがあります。

refが深く追跡する仕組み

オブジェクトを保持する通常のrefは、オブジェクト全体を深くリアクティブにします。ネストされたプロパティのどれかを変更しても更新が発生します。小さな状態には適していますが、大きな構造ではコストがかかります。

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef：.valueだけがリアクティブ

shallowRefは.valueの再代入を追跡しますが、保持している値の内部にある変更は追跡しません。内部の変更ではレンダリングは発生しません。

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

shallowRefを使うタイミング

データ全体を置き換える大きな、ほぼイミュータブルなデータや、外部オブジェクト（チャートのインスタンスや大規模なデータセットなど）をラップする場合に使用します。こうした場合、深い追跡にはメリットがなく、オーバーヘッドだけが増えます。

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

深い変更の問題

パフォーマンスのためにshallowRefの内部を変更しつつ、制御したタイミングで再レンダリングが必要になる場合があります。Vueはその変更を検知できないため、UIが古い状態のままになります。

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef：更新を強制する

triggerRefは、shallow refの内容を変更した後、そのshallow refに依存するエフェクトを手動で再実行します。複数の変更をまとめて行い、最後に一度だけトリガーします。

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

パフォーマンス向上のパターン

このパターンでは、大きな構造をshallowRefに保持し、変更ごとのリアクティビティのコストをかけずに自由に変更します。そして、まとめた変更をビューに反映したいタイミングで一度だけtriggerRefを呼び出します。

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw：完全に対象外にする

markRawはオブジェクトに印を付け、reactiveや通常のrefの内部であっても、Vueが決してリアクティブにしないようにします。プロキシ化すべきでないサードパーティ製のクラスインスタンスに使用します。

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

markRawが重要な理由

複雑なクラスインスタンス（マップ、エディター、WebSocketなど）をリアクティブプロキシでラップすると、内部参照が壊れたり、見つけにくいバグが発生したりすることがあります。markRawを使えば、リアクティブな状態の内部に置いたまま、インスタンスを変更されない状態に保てます。

ツールを組み合わせる

これらの機能は組み合わせて使用できます。markRawのインスタンスを保持するshallowRefを使うと、リアクティブに置き換えられる入れ物と、Vueが決してプロキシ化しない内部オブジェクトを用意できます。外部ライブラリとの連携に最適です。

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

リアクティビティのコストと制御

トレードオフがあります。ディープリアクティビティは手軽ですが負荷が高く、shallow APIは自分で更新をトリガーする代わりに、制御性とパフォーマンスを得られます。必要性がプロファイリングで示された場合にだけ使用してください。

確認テスト

高度なリアクティビティについての理解度を確認します。

まとめ

高度なリアクティビティの制御について学びました。

shallowRefは内部の変更ではなく、.valueの再代入にだけ反応します。大きなデータや外部データに適しています。
triggerRefは、shallow refの内容を変更した後に更新を手動で強制します（変更をまとめてから一度だけトリガーします）。
markRawはオブジェクトをリアクティビティの対象から永久に外します。サードパーティ製のクラスインスタンスに最適です。
これらの機能により、更新を自分でトリガーする代わりに、パフォーマンスと制御性を得られます。

よくある質問

「高度なリアクティビティ：shallowRefとtriggerRef」レッスンは無料ですか？

はい。「高度なリアクティビティ：shallowRefとtriggerRef」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「高度なリアクティビティ：shallowRefとtriggerRef」で何を学びますか？

パフォーマンス向けのshallowRef、リアクティビティから除外するmarkRaw、手動トリガー用のtriggerRef ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「高度なリアクティビティ：shallowRefとtriggerRef」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る