Vue Reactivity
Reactivity system, reactive vs ref, toRef, toRefs, unref, shallow reactivity, readonly
1What is Vue's reactivity system?
What is Vue's reactivity system?
Answer
Vue's reactivity system automatically detects changes in data and updates the DOM accordingly. It relies on JavaScript Proxies that intercept property access and modifications. This system ensures the user interface stays synchronized with the application state without manual intervention.
2What is the main difference between ref() and reactive()?
What is the main difference between ref() and reactive()?
Answer
ref() creates a reactive reference for a primitive value or object, accessible via .value, while reactive() creates a reactive proxy of an object without requiring .value to access properties. ref() is universal (primitives + objects) and ideal for simple values, while reactive() is optimized for objects but doesn't work with primitives. In practice, ref() is often preferred as it works with all types.
3How to access the value of a ref in the template vs in the script?
How to access the value of a ref in the template vs in the script?
Answer
In the template, Vue automatically unwraps refs, allowing direct access without .value (e.g., {{ count }}). In the script, you must use .value to read or modify the ref's value (e.g., count.value++). This automatic behavior in templates simplifies code writing while maintaining explicit control in JavaScript logic.
What happens if you destructure a reactive() object?
What is the purpose of toRefs() in Vue?
+17 interview questions
Other Vue.js / Nuxt.js interview topics
JavaScript Fundamentals
Modern JavaScript (ES6+)
Vue Basics
Vue Components
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Nuxt Fundamentals
Nuxt Data Fetching
Nuxt SSR & SSG
Nuxt Server Routes
Nuxt Modules
Vue Composables
Vue Forms & Validation
Nuxt State Management
Vue Testing
Nuxt Deployment & CI/CD
Vue Performance
Vue Advanced Patterns
TypeScript with Vue
Nuxt Authentication
SEO with Nuxt
Nuxt Internationalization
Vue Architecture
Nuxt Security
Vue Ecosystem
Migration Vue 2→3 & Nuxt 2→3
Master Vue.js / Nuxt.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free