Vue computed property not updating

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// NG: Vue 2ではリアクティブにならない
export default {
  data() {
    return {
      items: ['a', 'b', 'c']
    };
  },
  methods: {
    updateItem() {
      this.items[0] = 'x'; // リアクティブでない
    }
  }
}

1
2
3
4
5
6
7

// Vue 2
this.$set(this.items, 0, 'x');
// または
this.items.splice(0, 1, 'x');

// Vue 3
this.items[0] = 'x'; // OK（Proxyベース）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// NG: 新規プロパティはリアクティブにならない
export default {
  data() {
    return {
      user: { name: 'John' }
    };
  },
  methods: {
    addAge() {
      this.user.age = 30; // リアクティブでない
    }
  }
}

1
2
3
4
5
6
7

// Vue 2
this.$set(this.user, 'age', 30);
// または
this.user = { ...this.user, age: 30 };

// Vue 3
this.user.age = 30; // OK

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// NG: 外部変数はリアクティブでない
let externalVar = 0;

export default {
  computed: {
    doubled() {
      return externalVar * 2; // 変更を検知しない
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export default {
  data() {
    return {
      reactiveVar: 0
    };
  },
  computed: {
    doubled() {
      return this.reactiveVar * 2;
    }
  }
}

1
2
3
4
5

// NG: refをunwrapせずにアクセス
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count * 2); // count.valueを使うべき

1
2
3
4

import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// NG: 非同期処理後にリアクティビティが失われる
export default {
  data() {
    return {
      user: null
    };
  },
  async mounted() {
    const data = await fetchUser();
    // これは動作する
    this.user = data;
  }
}

1
2
3
4
5

// NG: reactiveオブジェクトの再代入
import { reactive } from 'vue';

let state = reactive({ count: 0 });
state = reactive({ count: 1 }); // リアクティブ接続が切れる

1
2
3
4
5
6
7

// プロパティを更新
state.count = 1;

// または ref を使用
import { ref } from 'vue';
const state = ref({ count: 0 });
state.value = { count: 1 }; // OK

1
2
3
4
5

// NG: ネストした変更を検知しない
watch(
  () => state.nested,
  (newVal) => console.log(newVal)
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

watch(
  () => state.nested,
  (newVal) => console.log(newVal),
  { deep: true }
);

// または
watch(
  () => state.nested.value,
  (newVal) => console.log(newVal)
);

1
2
3
4
5
6
7
8
9

// Vue DevToolsを使用
// または
watch(
  () => state,
  (newVal, oldVal) => {
    console.log('State changed:', newVal, oldVal);
  },
  { deep: true }
);