Vueのリアクティブ

Vue 3ではVue 2と異なり、Composition API の使用が推奨されている。

Ref

Options API よりも、リアクティブな値を扱いたい場合に、ref を使用する。ref でネストされたオブジェクトもリアクティブになる。

記述例：

<script lang="ts" setup>
import { ref } from "vue";

const setRef = ref(0);

</script>

Reactive

ただし、String や Number といった基本型を宣言できる一方で、Object や Array を宣言することも可能だが、監視できるのは宣言された変数自身のみである。

Reactive
Object や Array のようなオブジェクト型の中身も監視したい場合は、reactive を使用する。

<script lang="ts" setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
</script>