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

Question

Accepted Answer

**reactive** — makes object reactive. **ref** — wraps value in reactive container.

**reactive:**
- Proxy-based.
- No .value.
- Destructuring loses reactivity.

**ref:**
- Wrapper object.
- Uses .value.
- Can be destructured.

```typescript
import { reactive, toRefs } from "vue"

// reactive
const state = reactive({ count: 0 })
state.count++

// Destructuring loses reactivity!
let { count } = state
count++  // Does NOT update state

// Use toRefs to preserve
const { count: refCount } = toRefs(state)
refCount.value++  // Updates state
```

**Best practices:**
- Use ref for most cases.
- Use reactive for grouped state.

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