What is the difference between `ref()` and `reactive()`?

Both create reactive state, but differ in usage:

• ref(): Wraps any value (primitive or object) in an object with a .value property. You must use .value in script, but templates auto-unwrap refs.
• reactive(): Returns a reactive Proxy of an object directly — no .value needed, but it only works with objects/arrays/collections, not primitives. It also doesn't handle destructuring well since reactivity is lost.

import { ref, reactive } from 'vue'

const count = ref(0)
count.value++

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

ref is generally preferred for its flexibility and consistent unwrapping behavior.