More in Vue, Angular & Svelte — page 3
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
Explain patch flags and static hoisting in Vue 3's compiler
Tests your grasp of compiler-informed virtual DOM optimizations. A strong answer covers patch flags as bitmap hints for dynamic bindings and static hoisting as extracting static nodes to skip diffing. Red flag: claiming Vue 3 removes the virtual DOM.
How does Svelte compile count += 1 into DOM updates?
Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.
Compare Angular Zone.js and Vue 3 Proxy reactivity
This tests update granularity. Contrast Vue 3 Proxy tracking, targeting only affected components, with Angular Zone.js patching async APIs to trigger top-down dirty checking across tree. Vue binds deps at render; Angular compares values each cycle.
How is a Vue template compiled into a render function?
WHAT IT TESTS: Knowing Vue templates compile to h() render functions and directives become JS control flow. ANSWER OUTLINE: Map v-if to ternaries, v-for to array map, and events to onXxx props. RED FLAG: Believing directives survive as runtime HTML attributes.
Why is Svelte called a 'disappearing framework'?
Tests whether you understand compile-time versus runtime-heavy frameworks. A strong answer says Svelte compiles components to vanilla JS at build time, shipping a tiny runtime instead of a reconciler or virtual DOM. Red flag: claiming there is zero runtime.
What is the Virtual DOM's role during a Vue state update?
Tests your grasp of Vue's reactive render pipeline. A strong answer: state change triggers a new virtual DOM tree; runtime diffs it against the old tree to apply only necessary real DOM updates. Red flag: saying virtual DOM updates browser DOM directly.
How would you diagnose and optimize slow Angular component tests?
Tests Angular test economics and runner overhead. Strong answers profile with Vitest, swap Karma for jsdom/happy-dom, mock services, and reduce TestBed recompilation via targeted imports.
Describe the role of a spy in testing with a framework example
This tests whether you know a spy records calls without replacing original implementation. A strong answer defines the tracking role, picks a concrete Vue or Angular handler, and asserts with toHaveBeenCalled.
How do you test a Svelte component updates a writable store?
WHAT IT TESTS: Integration of Svelte writable stores with Testing Library. ANSWER OUTLINE: Import the store with the component, render, await fireEvent.click, then assert the store value. RED FLAG: Using component internals or treating fireEvent as sync.
How do you mock an async service call in an Angular component test?
This tests Angular unit isolation and HTTP mocking. A strong answer covers HttpTestingController setup, flushing a mock response, asserting UI changes, and notes mocking avoids flaky networks. Red flag: using real HTTP calls in unit tests.
How do you test emitted events using Vue Test Utils?
Tests Vue Test Utils event inspection. Strong answer: mount, trigger('click'), then check wrapper.emitted('increment') for the payload array. Remember it returns an array of arrays, one per emission.
What is Angular's TestBed and when would you use it?
WHAT IT TESTS: Your knowledge of TestBed as the component factory and change-detection controller. ANSWER OUTLINE: Say createComponent returns a fixture with no immediate binding, so await fixture.whenStable before asserting DOM.
What is the fundamental difference between unit and component tests?
WHAT IT TESTS: Isolation levels in frontend testing. Unit tests verify single functions or composables with mocked dependencies; component tests verify mounting, rendering, and interaction and pull in more code. RED FLAG: Claiming it is only the tool.
How do you architect Svelte stores to minimize WebSocket re-renders?
Tests Svelte store granularity and subscription semantics. A great answer splits the monolith into domain stores, uses derived selectors to isolate slices, and leverages readable stores to encapsulate the WebSocket source.
Implement virtual scrolling for a large list in Vue
Tests DOM cost awareness and viewport culling. Strong answer: mount only visible nodes plus overscan, recycle DOM on scroll, and preserve total scroll height with a spacer. Red flag: suggesting pagination or naive v-for without keys.
How does Svelte surgically update the DOM without VDOM?
Tests VDOM overhead vs compile-time optimization. A strong answer explains that Svelte compiles reactive dependencies into direct DOM API calls, skipping tree creation and diffing. Red flag: claiming VDOM is slow because the DOM itself is slow.
Why does an OnPush Angular child not update when its input changes?
Tests OnPush reference equality and manual change detection. Strong answers name: in-place object mutation as the root cause; ChangeDetectorRef.markForCheck or detectChanges to force updates; and Angular Signals as a modern path.
How would you use dynamic import() to lazy-load a component-specific library?
Tests lazy loading and bundle splitting. Good answers call import() inside the component lifecycle, await the module namespace, let the bundler split the chunk, and handle loading and error states. Bad answers put import() at top level, defeating lazy loading.
How do you lazy-load a route in Vue or Angular?
Tests route-level code splitting. Strong answers mention dynamic imports in Vue Router or Angular loadChildren and highlight a smaller initial JS bundle. Red flag: confusing this with image lazy loading or claiming it speeds up runtime navigation.