🔰 Vueのリアクティブが壊れるNG例集

〜画面が更新されない時、だいたいこれ〜

Vueでこんな経験ありませんか？

• 値は変わってるのに画面が変わらない
• console.logでは合ってるのに表示されない
• 「Vue壊れた？」って思う

結論から言います👇
Vueは壊れてません。書き方がNGなだけです。

---

❌ NG① dataに定義していない変数を使う

ダメな例

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      total++; // ❌ dataにない
    }
  }
}

なにが起きる？

• Vueは total を知らない
• 当然、画面も更新されない

✅ 正しい書き方

data() {
  return {
    count: 0,
    total: 0
  }
}

👉 リアクティブなのは「Vueが管理しているデータだけ」

---

❌ NG② dataの外で状態を持つ

ダメな例

let count = 0;

export default {
  methods: {
    increment() {
      count++;
    }
  }
}

なにがダメ？

• Vueの管理外
• 変わってもVueは気づかない

✅ 正しい考え方

data() {
  return {
    count: 0
  }
}

👉 状態は必ずVueの中に置く

---

❌ NG③ DOMを直接操作する

ダメな例

document.querySelector('p').textContent = '変更した';

なにが起きる？

• Vueは「知らない変更」
• 次の更新でVueが上書き

👉 一瞬表示されて消える現象の原因

✅ 正しいやり方

<p>{{ message }}</p>

data() {
  return {
    message: '変更した'
  }
}

👉 画面じゃなくデータを変える

---

❌ NG④ 配列を直接書き換えて安心する（Vue2経験者注意）

ダメになりがちな例

this.todos[1] = '変更';

問題点

• Vue2では検知できないケースがあった
• Vue3では改善されたが、癖は残る

✅ 安全な書き方

this.todos.splice(1, 1, '変更');

または

this.todos = [...this.todos];

👉 「ちゃんと更新された形」にする

---

❌ NG⑤ オブジェクトに後からプロパティ追加

ダメな例

data() {
  return {
    user: {}
  }
}

this.user.name = 'Taro'; // ❌

なにが起きる？

• Vue2ではリアクティブにならない
• Vue3でも混乱の元

✅ 正しい書き方

data() {
  return {
    user: {
      name: ''
    }
  }
}

👉 最初に形を決める

---

❌ NG⑥ computedの中で値を書き換える

ダメな例

computed: {
  total() {
    this.count++; // ❌
    return this.count * 2;
  }
}

なにがダメ？

• computedは「計算専用」
• 副作用を起こすと地獄

✅ 正しい使い分け

• computed → 計算
• methods / watch → 変更

---

❌ NG⑦ リアクティブじゃないと思い込んでwatch地獄

よくあるパターン

watch: {
  count(val) {
    this.double = val * 2;
  }
}

問題点

• 本来computedで済む
• コードが複雑になる

✅ 正解

computed: {
  double() {
    return this.count * 2;
  }
}

👉 「派生データはcomputed」

---

🔰 初心者が覚えておくチェックリスト

画面が更新されない時👇

• dataに定義してる？
• dataの外で状態持ってない？
• DOM直接触ってない？
• computedで変更してない？
• watch使いすぎてない？

---

🔰 まとめ（超重要）

Vueでリアクティブが壊れる原因は👇

Vueの管理外で何かしようとしている

これだけ。

---

🌱 最後に

リアクティブで詰まる人は
Vueをちゃんと理解しようとしている人です。

なんとなく動かす人は
ここで詰まりません。

その他関連記事はこちら→プログラミング備忘録