Vue interview

Performance, accessibility and security

Measuring and fixing a slow Vue app — lazy loading, shallowRef, computed, v-once and v-memo, virtual lists — accessibility in a single-page app, and XSS with v-html.

Performance Accessibility Security

From your Best practices note and the performance part of Important.

Know

Measure first: the browser Performance panel, Lighthouse, the Vue DevTools performance timeline.
Loading: lazy routes, defineAsyncComponent, check the bundle, load third-party scripts late.
Updates: computeds over template methods, shallowRef for large data, stable keys and props, no needless deep watchers; v-once for static content, v-memo for large lists.
Long lists: virtual scrolling or pagination.
Accessibility: move focus and update the title after route changes; landmarks and ordered headings; real buttons and links; aria-label, aria-labelledby, aria-describedby; aria-hidden only on non-focusable decoration; labels instead of placeholders.
Security: Vue escapes interpolation and attributes; v-html with user content is XSS; validate user URLs in :href; never compile user content as a template.

Semantic elements like <header>, <nav>, <main> and <footer> map to ARIA landmark roles (banner, navigation, main, contentinfo), not to ARIA labels. A label names an element; a role says what it is.

Gotcha· defineAsyncComponent

"loadAsyncComponent" in the performance list is defineAsyncComponent.

Exercise

Render 10,000 rows, record a Performance profile, then switch to a virtual list and compare the numbers.
Navigate an SPA you built with the keyboard and a screen reader only, then add focus management on route change.

Be able to say

Be able to say· How would you make a slow Vue app faster?

"First measure, so I know whether it's loading or updating. For loading: lazy routes and async components, a smaller bundle, third-party scripts later. For updates: computeds instead of template methods, shallowRef for big data, stable keys and props, fewer deep watchers, v-once and v-memo where they fit. And a long list gets virtual scrolling, because the DOM itself is usually the cost."

Your notes

Open in Notes

Nothing yet. Notes filed here show up on this page and the section overview.

Built-ins and tooling

KeepAlive and its cache, Teleport for modals, what Suspense waits for, Vite versus webpack and Rolldown in Vite 8, how Vue Router works, and what Pinia adds over a shared reactive object.

Hydration errors

What hydration is, why a mismatch costs more than a console warning, and why the author of a layer or module owns the problem for every app that consumes it.