Top 30 Easy Vue, Angular & Svelte Interview Questions and Answers for Freshers

Question 1

Which approach correctly applies Vue's progressive philosophy to a legacy server-rendered page?

Accepted Answer

Dropping in a CDN script tag to enhance one form, then migrating that component to a Vite SFC later

Answer

Selecting Vue because it has a small bundle size compared to other frameworks

Answer

Rewriting the entire site as a compiled SPA before adding Vue to a single component

Answer

Avoiding the CDN approach because Vue loses reactivity without a build step to compile templates

Question 2

Which built-in Angular module is specifically designed for handling user input and validation, a capability that Vue and Svelte projects typically address through external libraries such as VeeValidate or FormKit?

Accepted Answer

Template-driven and reactive forms

Answer

Signal-based change detection

Answer

State management with NgRx

Answer

Hierarchical dependency injection

Question 3

How does Svelte's compiler-first design most directly improve the end-user experience compared to virtual DOM frameworks?

Accepted Answer

It shifts work to build time, producing smaller bundles and less browser CPU work for faster page loads.

Answer

It removes every byte of framework runtime code, so apps run without any JavaScript overhead.

Answer

It pre-computes virtual DOM diffs at build time to speed up reconciliation in the browser.

Answer

It allows developers to write less boilerplate, making UI code easier to read and maintain.

Question 4

You need to generate deployable files to upload to a web server. Why should you use ng build instead of ng serve?

Accepted Answer

ng build writes the compiled output to the dist/ folder, while ng serve keeps the build in memory and starts a dev server

Answer

ng serve produces production-optimized bundles by default, while ng build uses development settings

Answer

ng serve writes files to disk just like ng build, but only includes development source maps

Answer

ng build automatically starts a local server on port 4200, while ng serve requires a separate web server

Question 5

What does create-vue's practice of asking about Pinia and Vitest reveal about Vue's overall framework design?

Accepted Answer

Vue prefers to keep its runtime core small and let developers opt into official ecosystem tools only when needed.

Answer

Vue considers Pinia and Vitest to be community plugins outside the official ecosystem.

Answer

Vue treats these choices as reversible runtime settings that can be changed without altering the project skeleton.

Answer

Vue relies on the legacy Vue CLI to handle dependencies because create-vue cannot manage them automatically.

Question 6

You place a helper component named utils.svelte inside src/routes/dashboard/. What is true about its routing behavior?

Accepted Answer

It does not create a route because SvelteKit requires the plus prefix for route files

Answer

It is ignored unless it exports a load function from +page.js

Answer

It automatically creates a public page at /dashboard/utils

Answer

It only works if the folder is renamed to [utils] with brackets

Question 7

Which of the following would violate encapsulation in a reusable Button component?

Accepted Answer

Providing a class or style prop for consumer style overrides

Answer

Accepting a variant prop to control visual style

Answer

Forwarding native click events to the parent

Answer

Using a slot for the button's text label

Question 8

Which approach should a child component use when it needs to change data received from its parent via props?

Accepted Answer

Emit an event or invoke a callback to ask the parent to update the data.

Answer

Declare a two-way binding so the prop syncs back to the parent automatically.

Answer

Mutate the prop directly and let the parent detect the change.

Answer

Use a global state store to overwrite the parent's original variable.

Question 9

When a child must notify its parent of a new search query, which approach preserves proper encapsulation in Vue and Angular?

Accepted Answer

The child declares an event via defineEmits in Vue or @Output EventEmitter in Angular and emits the query upward.

Answer

The child receives a callback prop in Vue or calls a parent method through dependency injection in Angular.

Answer

The child dispatches the value through a global event bus in Vue or uses [(ngModel)] two-way binding in Angular.

Answer

The child directly assigns the new value to a property on the parent instance or shared service.

Question 10

A sidebar card is toggled ten times a minute. Why prefer v-show over v-if?

Accepted Answer

v-show keeps the node mounted and preserves internal state

Answer

v-show removes the element from the DOM to save memory

Answer

v-if is lazy and skips initial render until the condition is true

Answer

v-if toggles the display CSS property without destroying the node

Question 11

When you write v-model or [(ngModel)] in a template, what is the framework actually doing under the hood?

Accepted Answer

It is shorthand for binding a value property downward and listening for an update event upward

Answer

It creates a direct reactive bridge that bypasses props and events to keep DOM and state in sync

Answer

It compiles to a one-time value assignment and a manual addEventListener call on the native DOM element

Answer

It allows the input element to mutate the component state directly, breaking unidirectional flow

Question 12

Which accurately describes a key difference between Vue 3's ref() and reactive()?

Accepted Answer

ref() requires accessing state through .value in script, while reactive() allows direct property access.

Answer

ref() and reactive() can be swapped without changing how state is accessed in code.

Answer

ref() is intended only for primitive values, while reactive() handles objects.

Answer

ref() automatically unwraps in script but requires .value in templates.

Question 13

Why should initialization logic that reads @Input values be placed in ngOnInit instead of the constructor?

Accepted Answer

Because input properties are guaranteed to have their initial bound values in ngOnInit but not in the constructor.

Answer

Because ngOnInit is a TypeScript compiler requirement that ensures input type safety.

Answer

Because ngOnInit executes before the constructor during component instantiation.

Answer

Because the constructor should never contain any logic whatsoever.

Question 14

In Svelte 5, you declare an array with let items = $state([1, 2]) and later call items.push(3). What is the result?

Accepted Answer

The UI updates automatically because the array is wrapped in a reactive proxy

Answer

You must wrap the push call in an $effect rune to trigger the update

Answer

The compiler converts the push call into an immutable spread operation

Answer

Nothing updates until you reassign the items variable to itself

Question 15

How do scoped styles in a Vue Single-File Component prevent leaking styles to neighboring components?

Accepted Answer

By appending a unique data attribute to both the CSS selectors and DOM elements

Answer

By requiring developers to use BEM naming conventions

Answer

By injecting the styles into the Shadow DOM

Answer

By hashing style rules and loading them as a CSS Module

Question 16

What mechanism does Angular use by default to prevent a component's styles from affecting other components?

Accepted Answer

It generates a unique HTML attribute and rewrites the component's CSS selectors to include it.

Answer

It scopes styles by automatically prefixing each rule with the component's TypeScript class name.

Answer

It prepends a unique generated CSS class to every element and selector.

Answer

It wraps the component template in a native Shadow DOM boundary.

Question 17

What transformation does Svelte apply to a component's styles at compile time to keep them isolated?

Accepted Answer

It appends a unique hashed attribute to every element and rewrites each CSS selector to include it.

Answer

It runs the styles through CSS Modules to automatically hash and replace the class names.

Answer

It wraps the component in Shadow DOM so the browser handles encapsulation natively.

Answer

It injects a small runtime script that adds unique scoped classes to elements when they mount.

Question 18

Under the hood, what does v-model on a native checkbox compile into?

Accepted Answer

A :checked binding paired with an @change listener that updates state

Answer

A true two-way DOM runtime binding that watches the element's attributes

Answer

A :value binding paired with an @input listener that updates state

Answer

A direct DOM watcher that uses HTML initial attributes as the source of truth

Question 19

Why are reactive forms preferred over template-driven forms for a large form with dynamically added fields?

Accepted Answer

They provide explicit synchronous access to FormArray and immutable model updates.

Answer

Both approaches scale identically for large applications since the difference is only syntax.

Answer

They define the form model implicitly through template directives, reducing boilerplate.

Answer

They use mutable asynchronous models and validation directives that require less unit-test setup.

Question 20

In Svelte 5, how do you bind an input to reactive state and log its validity after every keystroke?

Accepted Answer

Use $state for the input and run validation logic inside an $effect that reads it.

Answer

Use $derived for the input value and validate it in a template expression.

Answer

Use a plain let variable and read it inside an $effect.

Answer

Use $state for the input and mutate it inside an $effect to auto-correct invalid input.

Question 21

Which scenario best illustrates prop drilling creating a maintenance problem?

Accepted Answer

A user object is passed through Sidebar and SidebarMenu to reach Avatar, even though only Avatar consumes it.

Answer

A user object flows from App through UserProfile and Sidebar to Avatar, with every layer reading it to render UI.

Answer

Two distant leaf components import the same Pinia store to access a shared user state.

Answer

A deeply nested Avatar component receives a user prop directly from its parent and renders a greeting.

Question 22

If two sibling components need to keep a value synchronized without installing a state library, where should that state live?

Accepted Answer

In their closest common parent, passed down via props and updated through events

Answer

In an event bus that broadcasts changes directly between the siblings

Answer

In the child that first receives the prop, mutating it directly to trigger updates

Answer

In localStorage so both components can access it independently

Question 23

What happens when fetch is called directly inside a component template instead of inside a mount hook?

Accepted Answer

It triggers a new request on every render, often causing an infinite loop

Answer

The fetch result is automatically cached so duplicate requests are skipped

Answer

The request executes only once because templates are evaluated during the initial mount

Answer

The framework detects the Promise and suspends rendering until the data arrives

Question 24

What do Angular's router-outlet and Vue's router-view share in purpose?

Accepted Answer

They act as placeholders where the matched route component is rendered

Answer

They handle programmatic navigation between pages

Answer

They import the router configuration into the application bootstrap

Answer

They define the URL paths mapped to each component

Question 25

Which best describes how a declarative router link in an SPA template navigates to a new route while preserving client-side state?

Accepted Answer

It uses a framework-specific component or directive to intercept the click and push a History API state

Answer

It renders a standard anchor tag that relies on the framework to automatically suppress full reloads

Answer

It requires an anchor tag with a to attribute, such as a to='/about', to bind the destination path

Answer

It triggers a programmatic router.push call from inside the template markup

Question 26

When building a useFetch composable in Vue 3, where should the data, loading, and error refs be created to guarantee each component gets its own independent state?

Accepted Answer

Inside the useFetch function so every call returns a fresh set of refs

Answer

In a Pinia store that the composable imports and returns to the component

Answer

At the top level of the composable's module so all components share a single reactive source

Answer

Inside the component's setup before calling useFetch, then passed in as arguments

Question 27

Which approach correctly creates an application-wide singleton auth service in modern Angular?

Accepted Answer

Decorate the service with Injectable and set providedIn to root, then inject it into components

Answer

Instantiate the service with the new keyword inside each component that uses it

Answer

Add the service to the providers array of every component that needs authentication state

Answer

Register the service in the providers array of the root AppModule to make it available globally

Question 28

Which approach correctly implements a minimal Svelte action that logs when an element is mounted?

Accepted Answer

Write a function that receives the DOM node, logs inside the function body, and is attached in the template with the use directive.

Answer

Write a function that logs immediately at the module level and attach it in the template with the on directive.

Answer

Use an onMount hook in the component script to query the DOM and log the element.

Answer

Write a function that receives the node, logs a message, returns a cleanup function directly, and attach it with the use directive.

Question 29

Which scenario best fits a computed property instead of a method in Vue?

Accepted Answer

Building a full name from reactive firstName and lastName fields

Answer

Handling a click event that toggles a visibility flag

Answer

Filtering a list by a search term passed as a template argument

Answer

Sending analytics data whenever a user toggles a checkbox

Question 30

What is the primary effect of configuring a route to be lazy-loaded in Vue or Angular?

Accepted Answer

The build tool emits a separate JavaScript chunk for the route that is fetched asynchronously when the user first navigates to it, reducing the initial bundle size.

Answer

It improves runtime navigation speed by preloading route components in the background before the user clicks a link.

Answer

It keeps the route template on the server and streams rendered HTML only when the user requests that path.

Answer

It defers loading heavy assets like images and videos on that route until they scroll into the viewport.