ref and reactive

Choosing ref vs reactive

ref wraps any value in an object with .value. reactive converts objects to reactive proxies.

Many codebases standardize on ref for consistency — including objects.

const count = ref(0)
count.value++
const state = reactive({ nested: { n: 1 } })
state.nested.n++

Both styles updating state.

Helpers

toRef, toRefs, unref, isRef

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

ref and reactive Cheatsheet

Quick reference for patterns covered in this lesson.

Destructure

Destructuring reactive objects can lose reactivity — use toRefs.

Common Mistakes

• Losing reactivity via destructure.
• Mixing styles randomly without team rules.

Key Takeaways

• ref and reactive is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.