Vue Academy · レッスン

onUpdatedとonBeforeUpdate

Q: 「onUpdatedとonBeforeUpdate」で何を学びますか？

リアクティブなデータ変更への対応、onUpdatedで無限更新ループを避ける方法について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

リアクティブなデータ変更への対応、onUpdatedで無限更新ループを避ける方法について学習します。

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

更新前後のフック

リアクティブなデータが変更されると、Vueはコンポーネントを再レンダリングします。これを前後から囲む2つのフックがあり、onBeforeUpdateはDOMにパッチが適用される前に実行され、onUpdatedはその後に実行されます。

onUpdated：パッチ後

onUpdatedは、リアクティブな状態の変更を反映するようにDOMが更新された後に実行されます。この時点では、レンダリングされたDOMがデータと一致しています。

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

更新後のDOMを読み取る

パッチ処理が完了しているため、最新のレンダリングに依存する要素の新しいサイズや位置を読み取るには、onUpdatedが適しています。

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

無限ループの罠

onUpdated内でリアクティブな状態を変更してはいけません。変更すると別のレンダリングが発生し、再びonUpdatedが実行され、また変更が行われます。この無限ループによってアプリがフリーズします。

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

代わりにwatchを使う

特定の値の変更に反応したい場合は、onUpdatedではなくwatchを使用します。watchは1つのソースを対象にするためループのリスクを避けられますが、onUpdatedはすべてのレンダリングで実行されます。

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate：パッチ前

onBeforeUpdateは、リアクティブな変更の後、VueがDOMにパッチを適用する前に実行されます。ここではDOMにはまだ古い値が表示されています。

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

ユースケース：更新前のスナップショット

onBeforeUpdateでは古いDOMを参照できるため、変更前の状態を保存するのに最適です。たとえば、更新後に復元できるように現在のスクロール位置を記録できます。

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

すべてのレンダリングで実行される

どちらのフックも更新サイクルごとに実行されるため、頻繁に呼び出されることがあります。パフォーマンスの問題を避けるため、コールバックは軽量に保ってください。

データの副作用には使わない

これらのフックはデータではなくDOMを扱うものです。データに基づく反応には、派生値にはcomputed、特定のソースに対する副作用にはwatchを使用してください。

実行順序のまとめ

リアクティブな変更が起きると、状態が変更され、onBeforeUpdateが実行され（古いDOM）、VueがDOMにパッチを適用し、その後onUpdatedが実行されます（新しいDOM）。

使い分け

onBeforeUpdate：スクロール位置や選択状態など、古いDOMの状態を保存します。
onUpdated：パッチ適用後に新しいDOMを読み取ります。ただし、ここでリアクティブな状態を変更してはいけません。

クイックチェック

更新フックについての知識を確認しましょう。

まとめ

更新フックのまとめ：

onUpdatedはDOMへのパッチ適用後に実行されます。新しいサイズの読み取りなどに使用します。
内部でリアクティブな状態を変更してはいけません（無限ループになります）。代わりにwatchを使用します。
onBeforeUpdateはパッチ適用前に実行され、古いDOMを参照できます。スナップショットの保存に適しています。
どちらもすべてのレンダリングで実行されるため、処理は軽量に保ってください。

よくある質問

「onUpdatedとonBeforeUpdate」レッスンは無料ですか？

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

「onUpdatedとonBeforeUpdate」で何を学びますか？

リアクティブなデータ変更への対応、onUpdatedで無限更新ループを避ける方法について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「onUpdatedとonBeforeUpdate」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る