More in Vue, Angular & Svelte — page 4
Vue computed vs method: performance difference and when to choose each?
This tests Vue reactivity caching. Answer: computed caches and reruns only when reactive deps change, while methods run each render. Choose computed for derived data; methods for events/args. Red flag: saying computed is always faster or passing arguments.
Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
When would you provide an Angular service at the component level?
Tests Angular DI scoping beyond singletons. A strong answer picks stateful reusable widgets, explains providers create one instance per subtree, and notes cleanup on destroy. Red flag: claiming this is for performance without mentioning state isolation.
How would you design useCounter to support shared or independent state?
Tests your grasp of scope in Vue composables. Great answers contrast module-level refs for global singleton state against function-level refs for per-instance isolation, and explain tradeoffs.
Architect reusable form validation in Vue vs Angular
Tests how you encapsulate reactive state across frameworks. Contrast Vue's useForm composable returning refs and lifecycle hooks. Contrast Angular's service exposing a FormGroup via RxJS.
How would you create a parameterized Svelte tooltip Action?
It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.
Vue 3 Composables vs Vue 2 Mixins: differences and problems solved
Tests why Vue replaced mixins with composables for stateful logic reuse. Answers cite property collisions, unclear origin, inflexible config, and weak type inference.
Would you use a Service or a custom Pipe for currency formatting?
WHAT IT TESTS: Using Pipes for template formatting versus Services. ANSWER OUTLINE: Choose Pipe for declarative syntax; implement PipeTransform with transform(value, ...args); use Intl.NumberFormat; register standalone.
What is a Svelte Action? Write a simple logging action.
WHAT IT TESTS: Whether you understand a Svelte action as a lifecycle function attached to a DOM node via use: and can write its minimal signature. ANSWER OUTLINE: Define a function receiving the node, log a message, and optionally return destroy.
How to create a singleton Angular auth service
Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.
How do you implement a data-fetching Composable in Vue 3?
WHAT IT TESTS: grasp of stateful logic reuse via Vue's Composition API. ANSWER OUTLINE: write useFetch accepting a URL, exposing data, loading, and error refs, then return them. RED FLAG: returning plain vars or using shared singletons instead of factories.
How do you manage router scroll behavior and history position restoration?
WHAT IT TESTS: Your grasp of popstate and centralized router scroll orchestration. ANSWER OUTLINE: Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays.
Contrast SvelteKit file-system routing with Vue/Angular router configs
WHAT IT TESTS: Convention-over-configuration tradeoffs. ANSWER OUTLINE: Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration.
What is the purpose of an Angular Resolve guard vs ngOnInit?
Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.
What are nested routes and why are they useful?
WHAT IT TESTS: hierarchical UI-to-URL mapping. ANSWER OUTLINE: nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. RED FLAG: flat routes with duplicated parent wrappers in every child.
How do you configure a route for lazy loading?
Tests route-level code splitting and initial bundle control. Outline: dynamic imports in route config, on-demand chunk fetching, and measurable load-time wins versus eager loading. Red flag: treating lazy loading as just images or components, not route code.
Explain navigation guards and provide an auth use case
WHAT IT TESTS: Grasp of routing lifecycle interception. ANSWER OUTLINE: Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard. RED FLAG: Calling them listeners without mentioning returns.
How do you create a dynamic route and access the id parameter?
This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.