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

ref() — wraps value in object. reactive() — makes object reactive.

ref():

• Wraps primitive values.
• Returns ref object with .value.
• Can also wrap objects.
• Works with primitives.

1import { ref } from "vue"
2
3const count = ref(0)
4console.log(count.value)  // 0
5count.value++

reactive():

• Makes object reactive.
• Returns proxy.
• No .value needed.
• Only works with objects.

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

Key differences:

• ref — primitives, .value.
• reactive — objects, no .value.
• ref — more flexible.
• reactive — cleaner for objects.