ref() Create a Reactive Reference
Last updated: 2026-10-22
ref() Create a Reactive Reference
ref() wraps any value in a reactive object accessed through .value. It is the way to hold primitives and values you want to replace as a whole.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
import { ref } from "vue"
const count = ref(0)
count.value++ // read/write via .value in script
template: {{ count }} // auto-unwrapped in templates⚙️ Arguments
| value | The initial value of any type; undefined when omitted |
|---|
Returns：A reactive object (Ref) with a .value property
▶ Example
Edit the code below and see the live result:
Output：
The page shows 'Clicked 0 times'; each click increments the number.💡 Key Points
⚠️ Warning In script code always use count.value — writing count++ rebinds the variable and breaks reactivity.
💡 Tip When a ref is returned from setup, templates auto-unwrap it: write {{ count }}, not {{ count.value }}.
ℹ️ Note Use ref when the value gets replaced wholesale; use reactive() for deeply reactive objects.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why is .value required?
A JavaScript cannot track reads/writes on primitives, so a wrapper with getter/setter captures access — that wrapper property is .value.
Q Do objects inside ref lose reactivity?
A No. ref(obj) deep-proxies the object internally, so mutations via .value.foo still trigger updates.
Q When should I use ref vs reactive?
A Prefer ref by default (any type, replaceable, keeps reactivity when destructured); reactive only suits objects and loses reactivity when destructured.
