Vue 3のwatchを使った処理で、VS CodeやTypeScriptの静的解析ではエラーにならないものの、実行時に無限更新ループが発生するケースを再現しました。

備忘録として、発生する仕組みと静的解析で検知しにくい理由を簡潔にまとめます。

本記事のサンプルコードは、OpenAI Codexを使用して作成しました。

環境

Vue 3
TypeScript
Vite

再現コード

リアクティブな値xを監視する「ウォッチ式A」と、xをインクリメントする「関数B」を用意します。

<script setup lang="ts">
import { ref, watch } from 'vue'

const x = ref<number>(0)

// ウォッチ式A：xの変更を検知して関数Bを呼び出す
watch(x, () => {
  incrementX()
})

// 関数B：xをインクリメントする
const incrementX = (): void => {
  x.value++
}
</script>

<template>
  <button type="button" @click="incrementX">
    無限更新ループを開始
  </button>
</template>

初期表示ではwatchのコールバックは実行されません。「無限更新ループを開始」ボタンを押してincrementX()を呼び出したときに、更新の連鎖が始まります。

無限更新ループになる仕組み

処理は次の順番で循環します。

ボタンを押す
関数BのincrementX()がxを更新する
xの変更をウォッチ式Aが検知する
ウォッチ式Aが関数Bを呼び出す
関数Bが再びxを更新する
以降、3〜5を繰り返す

つまり、監視対象を更新する処理を、その監視処理自身から間接的に呼び出していることが原因です。

ボタン → 関数B → xを更新 → ウォッチ式A → 関数B → xを更新 → …

実際にはVueの安全機構が再帰更新を実行時に検知し、ブラウザーのConsoleへ次のエラーを出して処理を停止します。

Maximum recursive updates exceeded

なぜ静的解析で検知しにくいのか

このコードには、while (true)や関数自身の直接呼び出しのような、明白な無限ループはありません。

関数B単体は、xを1回インクリメントするだけ
ウォッチ式A単体は、xの変更時に関数Bを呼ぶだけ
更新連鎖はVueのリアクティブシステムを介して実行時に成立する
ボタンを押すまで問題の処理が発火しない

フレームワークが実行時に登録する監視関係と、関数によるリアクティブな値の書き換えを組み合わせた循環までは、通常の静的解析では判断が難しい場合があります。

そのため、VS Code上では警告やエラーが表示されなくても、実際に操作すると再帰更新エラーが発生します。

対策

watchのコールバック内では、原則として監視対象そのものを無条件に更新しないようにします。

更新が必要な場合は、次のような対応を検討します。

条件を追加し、値を更新しても再び同じ処理が呼ばれないようにする
ある値から計算できる値は、watchで書き換えずにcomputedを使って求める
複数の関数やウォッチ処理をまたぐ場合は、値の読み書きを追跡する

サンプルコード

サンプルコードはGitHubで公開しています。

実行手順やVS CodeからF5でデバッグ起動する方法は、リポジトリのREADMEを参照してください。