More in Vue, Angular & Svelte — page 5
Build a reactive data-fetching utility with Svelte stores
Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.
Differentiate client state from server state and their tools
This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.
How would you cache data between a list and detail view?
WHAT IT TESTS: Splitting server and client state, sharing cache from list to detail. ANSWER OUTLINE: Use nested keys so detail reads from list cache with staleTime to skip refetches.
Implement optimistic UI for a like button with rollback on failure
Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
What is prop drilling and when is it a problem?
WHAT IT TESTS: props through indifferent layers couple components. ANSWER OUTLINE: define it as passing data through components that ignore it; move to global state when unrelated branches need same data. RED FLAG: prescribing Pinia for every shared field.
How would you architect a multi-step Svelte wizard with Stores?
Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.
How do you structure components and state for a dynamic Vue form?
This tests your design of normalized reactive state for dynamic Vue forms. A great answer uses a flat item array with stable keys, row components or scoped slots, and schema-driven validation. Red flags include mutating by index or using array indices as keys.
Implement an async Angular validator with HTTP and PENDING feedback
Tests Angular async validator lifecycle and HTTP race conditions. A strong candidate returns an Observable from AsyncValidatorFn, lets Angular set PENDING automatically, debounces input, and binds control.pending in the template.
How would you build a reusable Svelte validation action?
Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.
How do you debounce input for API validation in Vue or Angular?
Tests reactive stream control and cancellation. A strong answer uses debounceTime at 300ms, switches with switchMap, and handles loading and error states. Red flag: using setTimeout without cleanup or ignoring race conditions.
Validate matching Vue passwords: computed property or watcher?
WHAT IT TESTS: Whether you derive state or watch imperatively. ANSWER OUTLINE: Use a computed boolean for caching and dependency tracking; reserve watchers for side effects only. RED FLAG: Using a watcher to sync a match flag, wasting cycles and causing bugs.
Bind an input to a variable and validate with reactivity
Tests Svelte reactivity: connecting DOM state to validation logic. Good answer: `$state` for the variable, `$effect` to run validation when it changes, cleanup if needed. Red flag: using effects where event handlers suffice or creating infinite loops.
Key differences between Template-Driven and Reactive Forms in Angular
This tests Angular form architecture tradeoffs. Contrast explicit synchronous reactive models with implicit asynchronous template-driven ones; assign reactive to scalable dynamic forms and template-driven to simple inputs.
How does Vue v-model work syntactically under the hood?
Tests if you know v-model is syntax sugar over prop and event pairs. Strong answers map text to :value/@input, checkboxes to :checked/@change, selects to value/@change, and note JS state wins. Red flag: calling it magic or true two-way binding.
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
How does Vue's v-bind() CSS function work in style blocks?
Tests Vue SFC CSS transforms and browser primitives. Strong answer: Vue compiles v-bind() to scoped CSS custom properties, letting reactive values work with pseudo-selectors and media queries.
Shadow DOM vs build-time scoping for third-party widgets
WHAT IT TESTS: Your grasp of style encapsulation tradeoffs in widgets. ANSWER OUTLINE: Shadow DOM gives true isolation but blocks global theming and complicates SSR; build-time scoping keeps theming and SSR simple but needs tooling.
How do _ngcontent and _nghost attributes enforce Angular style isolation?
WHAT IT TESTS: Angular's emulated encapsulation mechanics. ANSWER OUTLINE: unique component ID, _nghost on host, _ngcontent on template nodes, and CSS rewritten with attribute selectors to scope styles.