Vue: Maximum recursive updates exceeded

概要

Vueのリアクティブシステムで更新が無限ループに陥り、最大再帰回数を超えた場合のエラーです。

エラーメッセージ

``` Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. ```

原因

1. watchで監視対象を更新: watch内で同じ値を変更
2. computedでの副作用: computed内でリアクティブ値を変更
3. テンプレート内での状態変更: v-for等で状態を変更
4. 相互依存するwatch: 2つのwatchが互いにトリガー

解決策

1. watchでの更新を回避

```javascript // 悪い例 watch(count, (newVal) => { count.value = newVal + 1; // 無限ループ });

// 良い例: 別の変数に格納 const displayCount = ref(0); watch(count, (newVal) => { displayCount.value = newVal + 1; }); ```

2. watchEffectの依存関係を確認

```javascript // 悪い例 watchEffect(() => { items.value = items.value.filter(x => x.active); });

// 良い例: トリガーを分離 const trigger = ref(0); watchEffect(() => { trigger.value; // 明示的な依存 // 処理 }); ```

3. computedは副作用なしに

```javascript // 悪い例 const total = computed(() => { count.value++; // 副作用はNG return items.value.length; });

// 良い例 const total = computed(() => items.value.length); ```

4. nextTickで非同期化

```javascript watch(source, async (newVal) => { await nextTick(); // 更新処理 }); ```

よくある間違い

• v-modelとwatchの二重バインディング
• propsを直接変更しようとする
• 配列のソートを毎レンダリングで実行

関連エラー

• React: Too many re-renders
• Vue: Reactivity not working