Vue 3’s reactivity tracks data changes and updates the UI automatically. ref wraps any value (especially primitives); reactive makes objects deeply reactive.
ref basics
const count = ref(0);
count.value += 1; // .value in script
// {{ count }} in template — auto-unwrappedIn setup() and composables you read/write .value. Templates unwrap refs for you—no .value in mustaches.
reactive objects
const state = reactive({ count: 0, label: 'Draft' });
state.count += 1; // no .value for propertiesUse reactive for object-shaped state; use ref for primitives or when you want to replace the whole value. Avoid destructuring reactive objects without toRefs—you lose reactivity.
Important interview questions and answers
- Q: ref vs reactive?
A:refworks for any value with.value;reactiveproxies plain objects. Preferreffor primitives and when reassigning whole values. - Q: Why .value in script but not template?
A: Templates compile to unwrap refs automatically; script runs plain JavaScript.
Self-check
- What triggers a re-render when you mutate a ref?
- Why can destructuring
reactivebreak updates?
Challenge
Click counter
- Click the button three times.
- Change the increment to add 2 per click.
Done when: the count increases by 2 on each click.
Tip: Use ref for primitives and reassignable values; use reactive for object-shaped state you mutate in place.
Interview prep
- ref vs reactive?
refwraps any value and uses.valuein script;reactivemakes object properties deeply reactive—preferreffor primitives and reassignments.