Vue Developer interview questions

A composable owns one coherent piece of reactive behavior and exposes a small explicit contract.

• Inputs should reveal dependencies through values, refs, getters, or injected services rather than hidden component assumptions.
• Returned state and operations should have stable meanings, with readonly state when callers should mutate only through actions.
• Watchers, listeners, and requests created by the composable need lifecycle-aware cleanup.

Reactive state created inside the composable function is normally per call, while module-scope state is shared across calls.

• Per-call state gives each component instance an independent lifecycle and value.
• Module-scope refs can implement deliberate singleton state but also outlive component unmounts.
• Shared module state needs special care in server rendering because requests must not leak data into one another.

Accept a flexible reactive input type and normalize it only when reading the current value.

• toValue reads a plain value, unwraps a ref, or calls a getter.
• Reading toValue inside watchEffect tracks a ref or getter dependency for later updates.
• Normalizing once outside an effect would capture only the current value and discard future reactive changes.

onScopeDispose registers cleanup with the active reactive effect scope that created the composable.

• It can stop timers, subscriptions, observers, and other resources without requiring a component-specific hook.
• When called during component setup, the component's scope disposes the cleanup on unmount.
• It also works when the composable runs inside a manually created effectScope.

effectScope groups computed values, watchers, and watch effects so they can be stopped together.

• Effects created while a scope is active become children of that scope.
• Calling stop disposes the grouped effects and their registered cleanup.
• It is useful for reusable services or temporary reactive subsystems whose lifetime is not exactly one component.

Provide reactive state together with a narrow interface that preserves one clear mutation owner.

• A provided ref or reactive object stays reactive for descendants that inject the same value.
• readonly prevents descendants from writing directly when the provider should control changes.
• Named actions can be provided beside the state so updates remain explicit and searchable.

An InjectionKey connects the provided and injected TypeScript type while giving the dependency a collision-resistant symbol identity.

• The key can describe a context interface containing readonly state and operations.
• inject returns a possibly undefined value unless a default or required-provider helper removes that case.
• Exporting one key from the context module keeps providers and consumers on the same contract.

Vue needs the current component instance to associate each hook with the correct lifecycle.

• setup and script setup establish that active instance while their synchronous code runs.
• Registering a hook after an unrelated await may occur after the active instance context is gone.
• Async work may run inside a registered hook, but the hook registration itself should happen during setup.

Use hooks only for resources whose lifetime should naturally follow the caller's component scope.

• Register DOM or browser setup in onMounted and release it in onUnmounted or onScopeDispose.
• Keep non-DOM reactive state available during setup so callers can use it in the first render.
• Expose explicit start and stop operations when the caller, rather than component mount, should control the resource.

A ref object tracks effects that read its value property and triggers them when that property changes.

• Object values assigned to a normal ref are converted to reactive proxies.
• Vue compares a new assignment with the previous raw value before notifying dependencies.
• The stable wrapper identity allows a ref to remain reactive even when its contained value is replaced.

reactive returns a Proxy whose identity differs from the original raw object and whose access enables tracking.

• Repeated reactive calls for the same raw object return the same proxy.
• Mutating or passing the raw object can bypass consumers that depend on proxy access.
• toRaw can retrieve the original temporarily, but keeping raw references for application state undermines consistent reactivity.

A ref keeps one reactive wrapper while its value can point to a different object after assignment.

• Assigning a new object to ref.value notifies effects that read the ref.
• A reactive variable relies on consumers using its existing proxy, so replacing the local variable does not update those consumers.
• Object.assign can update an existing reactive proxy when preserving its identity is the intended model.

They create ref interfaces whose reads and writes forward to properties of the original reactive source.

• toRef targets one property and can preserve a link even when that property is currently absent.
• toRefs converts the source's enumerable properties into a matching object of linked refs.
• They are useful for destructuring, while plain destructuring copies current primitive values and loses proxy tracking.

Use shallowRef when Vue should react to replacement of the top-level value but not proxy its nested contents.

• It suits large immutable structures, external state systems, or third-party class instances.
• Nested mutation does not trigger dependent effects because only access to the value property is tracked.
• Replacing shallow.value with a new identity triggers updates and keeps the reactivity boundary explicit.

triggerRef manually notifies effects after an in-place nested mutation that shallowRef would not observe.

• The shallow wrapper normally reacts only when its value property receives a new identity.
• Manual triggering can integrate an external mutable object whose update cannot be represented by replacement.
• Immutable replacement is usually clearer because it avoids hidden mutations followed by a separate notification step.

readonly prevents writes throughout a deeply converted object graph, while shallowReadonly protects only root properties.

• Both return proxies that warn on attempted writes rather than freezing the original object.
• Nested objects reached through readonly are also readonly proxies.
• Nested objects inside shallowReadonly remain mutable, which is useful only when that boundary is intentional.

markRaw prevents an object from being converted into a reactive proxy when proxying is inappropriate.

• It can suit component definitions, complex library instances, or values whose identity must remain raw.
• Nested values are not automatically marked, so mixing raw and proxied branches can create identity hazards.
• It should define a deliberate integration boundary rather than disable reactivity broadly for convenience.

A computed ref caches its last result and becomes dirty when one of its tracked reactive dependencies changes.

• Reading the computed getter records whichever reactive values are actually used on that execution path.
• Dependency changes invalidate the cache, but the getter remains lazy until the computed value is read again.
• Multiple consumers can read the same cached result without rerunning the getter for each consumer.

A writable computed ref should present a reversible view over source state rather than create a second source of truth.

• Its getter derives the exposed value from reactive sources.
• Its setter translates an assignment into updates of those same sources.
• If a transformation cannot be reversed clearly, an explicit action or local draft state is less surprising.

customRef gives explicit control over when reads are tracked and when writes trigger dependent effects.

• Its factory receives track and trigger functions and returns custom get and set behavior.
• Debounced or externally synchronized refs are common uses.
• The implementation should preserve stable value semantics because returning a new object on every get can cause confusing child updates.