What is the difference between ref and reactive in Vue 3?

ref

ref works with any type (primitives or objects). You access its value via .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const list = ref([1, 2, 3])
const user = ref({ id: 1, name: 'Bob' })

// Read/write requires .value
count.value++
name.value = 'Carol'
user.value.name = 'Dave' // nested properties don't need .value

In templates, refs are auto-unwrapped (no .value needed):

<template>
  <p>{{ count }}</p>
  <p>{{ user.name }}</p>
</template>

reactive

reactive only works with objects / arrays / Map / Set. Properties are accessed directly without .value.

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Alice',
  list: [1, 2, 3]
})

// Direct property access
state.count++
state.name = 'Carol'

Key Comparison

Feature	ref	reactive
Supported types	Any type	Objects, arrays, Map, Set
Access	Requires .value	Direct property access
After destructuring	✅ Stays reactive	❌ Loses reactivity
Reassignment	✅ Replace .value	❌ Replacing the whole object loses reactivity

The Destructuring Trap with reactive

const state = reactive({ count: 0, name: 'Alice' })

// ❌ Loses reactivity after destructuring
const { count, name } = state

// ✅ Use toRefs to keep reactivity
import { toRefs } from 'vue'
const { count, name } = toRefs(state)

Official Recommendation

The Vue 3 docs recommend preferring ref — it's more flexible, has consistent behavior, and avoids the destructuring pitfalls of reactive.