yoklainterview sim
ProgressHistory

Frontend Vue Performance Testing Interview Questions

75 verified Frontend Vue Performance Testing interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Vue Performance TestingDifficulty 1
What does the <KeepAlive> built-in component do when it wraps a dynamic component?
  • aIt forces the wrapped component to re-render on every parent update
  • bIt caches the component instance instead of destroying it✓
  • cIt prevents the component from ever mounting until it becomes visible
  • dIt automatically lazy-loads the component's JavaScript bundle
Explanation:<KeepAlive> preserves the component instance (including its state and DOM) in memory when it's toggled out of view, instead of unmounting/destroying it. When toggled back in, the same instance is reused rather than created fresh — this is why forms and scroll positions survive tab switches wrapped in <KeepAlive>.
Vue Performance TestingDifficulty 1
Why would you use defineAsyncComponent for a heavy component instead of importing it normally?
  • aIt automatically makes the component's reactivity faster
  • bIt disables the component's props validation to save runtime cost
  • cIt splits the component into a separate chunk loaded only when needed✓
  • dIt converts the component from Composition API to Options API
Explanation:defineAsyncComponent wraps a dynamic import(), so the build tool creates a separate JS chunk for that component. The chunk is only fetched when the component actually needs to render, reducing the initial bundle size — useful for rarely-used or heavy components (modals, charts, etc.).
Vue Performance TestingDifficulty 1
In Vue Test Utils, how does wrapper.get('.save') differ from wrapper.find('.save') when no element matches?
  • aget throws an error, while find returns an error wrapper whose exists() is false✓
  • bget returns every match, while find returns only the first match
  • cget searches child components, while find searches only native elements
  • dThere is no behavioral difference; the two methods are aliases
Explanation:get(selector) is intended for elements that must exist, so it throws a descriptive error when the selector matches nothing. find(selector) is useful for optional elements: it returns an error wrapper, allowing an assertion such as expect(wrapper.find('.save').exists()).toBe(false) without throwing during the lookup itself.
Vue Performance TestingDifficulty 2
<template>
  <div v-once>{{ expensiveGreeting }}</div>
  <button @click="count++">{{ count }}</button>
</template>

When count changes and the component re-renders, what happens to the <div> content?
  • aIt updates to the latest value of expensiveGreeting every time
  • bIt throws a runtime error because v-once conflicts with reactive updates elsewhere
  • cIt re-renders only every other time the component updates
  • dIt stays exactly as it was rendered the first time, never updating again✓
Explanation:v-once marks an element (and its children) to render exactly once and then be skipped on all future re-renders, treating it as static content from then on. Even though count changing causes the component to re-render, the v-once div is excluded from that update — its content is frozen at first render.
Vue Performance TestingDifficulty 2
import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';

test('increments on click', async () => {
  const wrapper = mount(Counter);
  await wrapper.find('button').trigger('click');
  expect(wrapper.text()).toContain('1');
});

Why is await needed before the assertion on wrapper.text()?
  • atrigger('click') runs the click handler asynchronously on a background thread
  • btrigger returns a promise that resolves after Vue's DOM update cycle (nextTick) completes✓
  • cawait is only needed to satisfy the test framework's syntax, it has no functional effect here
  • dWithout await, the test would throw a TypeError because trigger doesn't return a value
Explanation:Vue batches reactive DOM updates and applies them asynchronously (on the next microtask tick). wrapper.trigger() returns a promise that resolves after Vue has flushed pending DOM updates, so awaiting it ensures the DOM (and thus wrapper.text()) reflects the state change from the click before the assertion runs.
Vue Performance TestingDifficulty 1
What is the difference between mount() and shallowMount() in Vue Test Utils?
  • amount() only works with Options API components, shallowMount() only with Composition API
  • bshallowMount() renders the component without applying any of its CSS styles
  • cshallowMount() stubs out all child components instead of fully rendering them✓
  • dmount() requires a real browser DOM, shallowMount() works in Node.js only
Explanation:shallowMount() renders the target component fully, but replaces every child component with a lightweight stub (so their internal logic and DOM don't render). This isolates the test to just the component under test. mount() renders the full component tree, including all real children.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview