Vue Composition API

ref() for reactive primitives, reactive() for reactive objects (arrays/maps/etc.). ref() is some kind of a wrapper around reactive().

When using ref(), get proxy’s value with .value:

1
2
3
4
5
6
7
8
9

import { ref } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

If you use reactive(), you can’t reassign. Also see ref vs reactive in Vue 3?

• A basic tutorial