Vue: Reactivity not working の原因と解決策

概要

Vueのリアクティブな変更が画面に反映されない問題です。

症状

データを更新してもUIが更新されない

原因

ref未使用: プリミティブ値をそのまま使用
分割代入: リアクティブオブジェクトを分割
配列の直接変更: インデックスでの代入
新規プロパティ追加: 既存オブジェクトへの追加

解決策

1. refを使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<script setup>
import { ref } from 'vue';

// 悪い例
let count = 0;

// 良い例
const count = ref(0);

function increment() {
  count.value++;  // .valueでアクセス
}
</script>

2. reactiveの分割代入を避ける

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script setup>
import { reactive, toRefs } from 'vue';

const state = reactive({ name: 'John', age: 30 });

// 悪い例
const { name, age } = state;  // リアクティビティ失われる

// 良い例
const { name, age } = toRefs(state);
</script>

3. 配列の更新

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<script setup>
import { ref } from 'vue';

const items = ref(['a', 'b', 'c']);

// 悪い例
items.value[0] = 'x';  // Vue 3では動作するがVue 2では動作しない

// 良い例（両方で動作）
items.value = [...items.value.slice(0, 0), 'x', ...items.value.slice(1)];
// または
items.value.splice(0, 1, 'x');
</script>

4. オブジェクトへのプロパティ追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script setup>
import { reactive } from 'vue';

const user = reactive({ name: 'John' });

// Vue 3では動作
user.age = 30;

// Vue 2では必要
// Vue.set(user, 'age', 30);
</script>

よくある間違い

テンプレートでref.valueを書く（不要）
computedの戻り値を変更しようとする

概要

症状

原因

解決策

1. refを使用

2. reactiveの分割代入を避ける

3. 配列の更新

4. オブジェクトへのプロパティ追加

よくある間違い

Vue.js の他のエラー