Vue Performance
Virtual DOM, reactivity optimization, v-once, v-memo, lazy loading, code splitting, bundle size
1What is the Virtual DOM in Vue?
What is the Virtual DOM in Vue?
Answer
The Virtual DOM is a lightweight JavaScript representation of the real DOM tree. Vue uses the Virtual DOM to minimize direct DOM manipulations, which are expensive in terms of performance. When state changes, Vue creates a new Virtual DOM, compares it with the old one (diffing algorithm), then applies only the necessary changes to the real DOM. This approach significantly reduces the number of DOM operations and improves performance, especially for complex applications with many updates.
2What is the main difference between ref() and shallowRef()?
What is the main difference between ref() and shallowRef()?
Answer
ref() creates a deeply reactive reference where all nested properties are also reactive, while shallowRef() only makes the .value property itself reactive. With shallowRef(), deep mutations within the object do not trigger updates. The entire .value must be replaced to trigger reactivity. shallowRef() is useful for optimizing performance with large data structures where deep reactivity is not needed, or for integrating external state systems.
3What is the role of the v-once directive?
What is the role of the v-once directive?
Answer
The v-once directive renders an element and its children only once during the first render, then treats them as static content for all subsequent renders. This means that even if the data changes, the element will never be updated. This directive is useful for optimizing performance of static content that never changes after initial mount, such as banner images, logos, or text that requires no dynamic updates.
How does the v-memo directive introduced in Vue 3.2+ work?
What is the purpose of markRaw() in Vue?
+19 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
Vue Reactivity
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 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