Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Vue Js · Question Set
Performance & Optimization interview questions for placements and exams.
Questions
12
Included in this set
Subject
Vue Js
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Vue Js.
Use modern formats (WebP/AVIF), responsive sizes (srcset/sizes), lazy-loading (loading="lazy"), and cache headers/CDN. Defer non-critical assets and prefetch route chunks for perceived speed.
For complete preparation, combine this set with full subject-wise practice for Vue Js. You can also explore other subjects and sets from the links below.
Use list virtualization so only visible rows render (e.g., vue-virtual-scroller). Combine with stable keys, lightweight row components, and memoized computed values.
v-once renders an element/component once and skips future updates—great for static content. v-memo caches subtrees based on reactive dependencies array; it re-renders only when specified values change.
<h1 v-once>Static Title</h1>
<div v-memo="[user.id]">{{ user.name }}</div>Bottlenecks usually come from large lists without keys, deep reactive objects triggering wide updates, heavy computed/watch logic, and unnecessary re-renders via v-if/v-for misuse. Diagnose with Vue Devtools (Component tree, perf timeline), browser Performance tab, and flame charts to see slow updates and costly layouts.
v-show toggles CSS display and keeps the element in the DOM—best for frequent toggling (e.g., tabs, dropdowns). v-if adds/removes nodes, which is more expensive when toggled often. Use v-if for rarely shown content to avoid initial render cost.
A stable key lets Vue diff lists predictably and reuse DOM nodes. Without it (or using index as key for re-orderable lists), Vue may patch the wrong nodes, causing extra re-renders, incorrect state preservation, and animation glitches.
Computed values are cached based on their reactive dependencies. They recompute only when inputs change, whereas methods execute on every render. Use computed for expensive derivations like filtering/sorting.
const filtered = computed(() => items.value.filter(i => i.done))
<keep-alive> caches inactive component instances instead of destroying them. It’s ideal for expensive views like tab content or route views where state and scroll position should be preserved. Avoid caching memory-heavy components indiscriminately.
<keep-alive include="UserList,UserDetail"> <router-view /> </keep-alive>
Use shallowRef for large objects you don’t want deeply reactive (e.g., chart instances). Use markRaw to prevent Vue from making objects reactive (3rd-party libs). This avoids unnecessary dependency tracking and reactivity overhead.
const chart = shallowRef() chart.value = markRaw(new EChartsInstance())
Wrap the effect (API call or filter) in a debounced function or use watch with a debounce scheduler. This reduces update frequency, saving CPU and network.
watch(query, debounce((q)=> fetch(q), 300))
Enable production mode, tree-shaking, code-splitting via dynamic imports, vendor chunking, image compression, and preloading critical assets. Analyze bundles (e.g., visualizer) to spot large dependencies and switch to lighter alternatives.
Wrap a dynamic import with defineAsyncComponent and provide loading/error components and delays/timeouts. Pair with <Suspense> for async setup. This splits code and reduces initial bundle size.
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
loadingComponent: () => import('./Loading.vue'),
delay: 200,
timeout: 10000
})