Vue 3 Reactivity Cheat Sheet

Composition API, refs, and watchers

Last Updated: November 21, 2025

Focus Areas

Focus
Prefer `reactive` for nested objects and `ref` for scalars
Use `watch` for side effects instead of `watchEffect` for clarity

Commands & Queries

npm run dev
Run the development server
const state = reactive({})
Create reactive state
watch(() => state.count, value => ...)
React to changes

Summary

Combine composition APIs with watchers to keep reactivity predictable.

💡 Pro Tip: Use refs for primitives and `computed` for derived data.
← Back to Web Frameworks | Browse all categories | View all cheat sheets