Vue.js: What is the difference between ref() and reactive()?

ref() — wraps values in a reactive container. reactive() — makes objects deeply reactive.

ref():

• Works with primitives and objects.
• Returns a ref object with .value property.
• Template auto-unwraps in templates.
• More flexible, can be destructured.

reactive():

• Works only with objects and arrays.
• Returns a Proxy object.
• No .value needed for access.
• Destructuring loses reactivity.

1// ref - works with any value
2import { ref } from "vue"
3
4const count = ref(0)
5const user = ref({ name: "John" })
6
7count.value++  // Access with .value
8user.value.name = "Jane"

1// reactive - objects only
2import { reactive } from "vue"
3
4const state = reactive({ count: 0, name: "John" })
5state.count++  // No .value needed
6state.name = "Jane"

Key differences:

• ref — any value, uses .value, more flexible.
• reactive — objects only, no .value, cleaner syntax.
• Use ref for most cases, reactive for complex state objects.