Vue Developer interview questions

Vue is a JavaScript framework that renders a user interface from reactive state and component templates.

• Declarative code describes what the UI should look like for the current data instead of manually editing DOM nodes.
• When tracked state changes, Vue updates the affected parts of the rendered output.
• Components split the interface into reusable units with their own inputs, behavior, and template.

A Vue Single-File Component usually keeps logic, markup, and styles in one .vue file.

• The script or script setup section defines state, imports, props, emitted events, and component logic.
• The template section declares the HTML structure and Vue bindings.
• The style section contains CSS and may use scoped so its selectors are limited to that component.

createApp creates a Vue application instance, and mount renders its root component into a DOM container.

• The root component starts the component tree for that application.
• Plugins, global components, and application-level provide values are normally registered before mounting.
• The selector or element passed to mount identifies the existing page container Vue will control.

Vue represents rendered output as virtual nodes and compares new output with the previous one before updating the real DOM.

• A component render produces a lightweight JavaScript description of the UI.
• Reactive changes cause Vue to render the affected component again and patch only necessary DOM operations.
• Stable keys and predictable templates help Vue match old and new child nodes correctly.

Vue records which reactive values are read by an active effect and reruns that effect when those values change.

• Templates, computed values, and watchers can act as reactive effects.
• ref uses an object with a reactive value property, while reactive uses a Proxy for object access.
• Only tracked reads create dependencies, so unrelated state changes do not need to update every component.

ref creates a reactive container whose current value is read and changed through its value property in JavaScript.

• It works with primitives such as numbers and strings as well as objects.
• Assigning to count.value notifies templates, computed values, and watchers that depend on it.
• Templates normally unwrap refs automatically, so they use count rather than count.value.

reactive returns a deeply reactive Proxy for an object, array, Map, or Set.

• Property reads and writes are tracked through the Proxy without a value wrapper.
• The original plain object is not the same identity as the returned Proxy, so application code should use the Proxy.
• reactive is not intended for primitive values because primitives have no properties to intercept.

Use ref for standalone values and replaceable state, and use reactive for a group of object properties updated in place.

• ref handles primitives directly and keeps reactivity when the whole value is replaced.
• reactive offers convenient property access for an object but destructuring those properties can lose reactivity.
• A consistent local convention matters more than forcing all state into one primitive.

Vue removes much of the value syntax in templates, but unwrapping rules depend on where the ref appears.

• A top-level ref exposed to a template is normally read and assigned without .value.
• A ref stored as a property of a reactive object is unwrapped during property access.
• Refs inside arrays or native collections are not automatically unwrapped, so their value property is still needed.

toRefs converts each reactive property into a linked ref so destructuring does not break reactivity.

• Plain destructuring copies current property values and disconnects primitive variables from the Proxy.
• Each ref returned by toRefs reads from and writes to the corresponding source property.
• It is useful when a composable returns a reactive object whose fields callers want to destructure.

The Options API groups code by option type, while the Composition API groups related state and behavior together.

• Options components use sections such as data, computed, methods, watch, and lifecycle hooks.
• Composition components create refs, computed values, watchers, and hooks inside setup or script setup.
• Both use the same Vue reactivity and can build valid components, so the choice is mainly about organization and reuse.

script setup is compile-time syntax that makes Composition API declarations directly available to the template.

• Imported components can be used in the template without a separate components registration object.
• Top-level variables, functions, refs, and computed values are visible to the template.
• Compiler macros such as defineProps and defineEmits declare the component interface without runtime imports.

Local registration makes a component available only where it is imported, while global registration exposes it throughout an application.

• Local imports make dependencies visible and allow unused components to be removed more easily from builds.
• Global registration can suit a small set of truly universal UI primitives.
• Registering many feature components globally hides dependencies and increases the risk of name collisions.

Props are declared inputs passed from a parent component to a child component.

• The child declares accepted prop names and may also declare their types, requirements, and defaults.
• A parent binds dynamic values with v-bind or the colon shorthand.
• Props follow one-way data flow and should be treated as readonly inside the child.

Prop options document and check the values a parent is expected to pass.

• type performs a development-time runtime check against constructors such as String or Number.
• required reports an omitted prop, while validator can enforce an additional rule.
• Object and array defaults should be returned by a factory function so component instances do not share one mutable value.

A child declares and emits custom events, and the parent listens to those events on the child component.

• In script setup, defineEmits declares event names and returns the emit function.
• The child can include a payload, such as emit('save', formData).
• Component events do not bubble through the component tree like native DOM events.

Direct prop mutation breaks one-way data flow because the parent owns the source value.

• A parent update can overwrite a child mutation on the next render.
• The child should emit an event when it wants the parent to change shared state.
• For editable temporary state, the child may create a local copy and define how it synchronizes with new prop values.

Component v-model combines a value prop with a matching update event to create two-way binding syntax for the parent.

• The default Vue 3 contract uses the modelValue prop and the update:modelValue event.
• The child still does not mutate the prop directly and emits the new value instead.
• Named v-model bindings allow a component to expose more than one independently bound value.

Fallthrough attributes are undeclared attributes and listeners that Vue applies to a component's root element.

• Common examples include class, style, id, and native event listeners.
• A component with multiple root nodes must choose where attributes belong because Vue cannot infer one root target.
• inheritAttrs and the attrs object allow a component to disable or redirect automatic inheritance.

v-bind evaluates a JavaScript expression and assigns its result to an HTML attribute or component prop.

• The shorthand :href is equivalent to v-bind:href.
• Binding class and style supports strings, arrays, and objects for conditional styling.
• v-bind without an argument can apply all properties of an object as attributes or props.