intermediate

Vue reactivity

Understand ref, reactive, computed, watch, dependency tracking, unwrapping, and update scheduling.

Vue 3 reactivity uses Proxies. `ref` wraps a single value (unwraps in templates); `reactive` makes object graphs deeply tracked. `computed` caches until dependencies change; `watch` / `watchEffect` run side effects.

					const count = ref(0);
const state = reactive({ items: [] });
watch(count, (n) => console.log('count', n));

Updates batch asynchronously in the same tick. Reading `.value` in script for refs; templates auto-unwrap.

On interviews: dependency tracking versus React's explicit setState; why `reactive` loss on destructure; shallowRef for large immutable blobs.

Common pitfalls: replacing entire reactive root instead of mutating fields, deep watchers on huge trees, and storing non-reactive class instances without `markRaw`.

The trade-off is ergonomic auto-tracking versus mental model for refs, unwrap, and collection types.

Checklist:

ref for primitives and reassignable singles.
reactive for object graphs you mutate in place.
computed for pure derivation.
watch with explicit flush/deep only when needed.