Vue JS Vue JS Performance Optimization 1 — Questions and Answers
Question 1: What does the v-once directive do in Vue to help with performance?
- Renders the element only on the first route visit
- Renders the element or component once and never re-renders it on future updates (Correct answer)
- Limits an animation to a single play-through
- Prevents the element from being mounted more than once
Correct answer: Renders the element or component once and never re-renders it on future updates
v-once makes Vue skip the element and all its children during future re-renders, treating the initial render as static content.
Question 2: What is the purpose of the key attribute when using v-for in Vue?
- To style individual list items
- To give each item a unique identity so Vue can efficiently reuse and reorder DOM nodes (Correct answer)
- To bind a keyboard shortcut to each item
- To prevent duplicate items from being rendered
Correct answer: To give each item a unique identity so Vue can efficiently reuse and reorder DOM nodes
The key attribute helps Vue's virtual DOM diffing algorithm identify which items have changed, been added, or removed, enabling efficient patch operations.
Question 3: How does <KeepAlive> improve performance in Vue applications?
- It prevents the browser from garbage collecting unused components
- It caches inactive component instances so they do not need to be re-created when switched back to (Correct answer)
- It keeps the network connection alive during component navigation
- It stops reactive updates in background components
Correct answer: It caches inactive component instances so they do not need to be re-created when switched back to
<KeepAlive> wraps dynamic components to preserve their state and DOM in memory instead of destroying and recreating them on each toggle.
Question 4: What is the purpose of the v-memo directive introduced in Vue 3.2?
- Memoizes a component's computed properties
- Skips re-rendering a sub-tree when a specified array of dependencies has not changed (Correct answer)
- Caches API responses inside the template
- Prevents a slot from re-rendering when parent updates
Correct answer: Skips re-rendering a sub-tree when a specified array of dependencies has not changed
v-memo accepts a dependency array and only re-renders that element/component tree when one of the listed values changes, similar to React.memo.
Question 5: What does shallowRef() do to improve performance compared to ref()?
- It creates a ref that is only accessible from shallow components
- It makes the ref reactive only at the top level, skipping deep reactivity for nested objects (Correct answer)
- It prevents the ref from being used in templates
- It limits the ref to a single reactive update per tick
Correct answer: It makes the ref reactive only at the top level, skipping deep reactivity for nested objects
shallowRef() wraps a value in a ref but does not convert nested objects to reactive proxies, reducing overhead for large objects that are replaced entirely.
Question 6: How does lazy loading route components improve Vue application performance?
- It loads all components in parallel at startup
- It splits route components into separate chunks downloaded only when the route is first visited (Correct answer)
- It caches components in a service worker
- It removes unused CSS from loaded components
Correct answer: It splits route components into separate chunks downloaded only when the route is first visited
Dynamic imports with () => import('./Component.vue') enable webpack/Vite code splitting, so the initial JS bundle is smaller and chunks load on demand.
Vue JS Vue JS Performance Optimization 1
What does the v-once directive do in Vue to help with performance?