Vue Reactivity

Vue 3 uses Proxies to track dependencies when reactive state is read during render. This lesson covers practical patterns, syntax, and mistakes to avoid.

How Vue Reactivity Works

Vue 3 uses Proxies to track dependencies when reactive state is read during render.

When state changes, components that used it re-render efficiently.

import { reactive, ref, effect } from 'vue'
const state = reactive({ count: 0 })
state.count++

Reactive object updated via Proxy.

ref vs reactive

ref for primitives/objects; reactive for objects

Prefer Vue 3 + Composition API.
Use script setup for SFCs.
Keep components focused.
Lean on official docs.

Vue Reactivity Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
ref	.value	Common
reactive	object	Proxy
computed	derived	Cache
watch	side effects	Respond
shallow	perf	Advanced
markRaw	skip	Advanced

Avoid Destructure Traps

Destructuring reactive objects can lose reactivity — use toRefs.

Common Mistakes

Replacing a reactive object's identity carelessly.
Mutating props.

Key Takeaways

Vue Reactivity is a core Vue skill.
Practice in a Vite app.
Prefer clarity.
Revisit docs for edge cases.

Pro Tip

Prefer ref consistently in Composition API codebases for predictability.