Implement auto-cleanup reactive logic in Vue's Composition API and Svelte

WHAT THIS TESTS: This question tests whether you understand that reactive subscriptions must be explicitly tied to component lifecycles to avoid memory leaks, and whether you know the idiomatic patterns in Vue and Svelte rather than just Angular's async pipe. Interviewers want to see that you can manage manual subscriptions when framework magic is not available and recognize when framework sugar handles teardown automatically.

A GOOD ANSWER COVERS: First, in Vue's Composition API, you should mention two approaches. The manual approach uses onMounted to call subscribe and store the subscription token, then onUnmounted to call unsubscribe. The declarative approach uses watchEffect, which runs immediately, tracks reactive dependencies, and automatically cleans up its previous effect before re-running or when the component unmounts. Second, in Svelte, you should explain that prefixing a store variable with a dollar sign in the markup or script auto-generates subscribe and unsubscribe calls tied to the component lifecycle via the compiler. For non-store Observables or manual control, you use onDestroy to run cleanup. Third, a strong candidate contrasts these patterns with Angular's async pipe, noting that Vue lacks a template-level auto-subscription primitive in the Composition API, while Svelte's dollar prefix is compile-time syntactic sugar that achieves the same goal.

COMMON WRONG ANSWERS: A major red flag is suggesting you can call subscribe directly inside the template expression without any cleanup mechanism, which leaks memory every time the component renders. Another mistake is claiming Vue's watch or computed properties automatically manage external Observable subscriptions; they do not unless wrapped inside watchEffect with proper cleanup. In Svelte, saying you must manually call unsubscribe for standard dollar-prefixed store usage reveals a misunderstanding of the compiler's auto-cleanup. Similarly, confusing Svelte's onMount with a teardown hook or forgetting that onUnmounted must be registered synchronously during setup in Vue are both signals of shallow experience.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle a hot Observable that emits before mount and must replay the latest value, which pushes you toward BehaviorSubject patterns or Vue's watch with immediate set to true. They could also ask how to share a single subscription across multiple components without recreating it, leading to multicasting with shareReplay or Svelte's derived stores. Another angle is error handling inside watchEffect or Svelte's auto-subscription and how unhandled errors affect component stability.

ONE CONCRETE EXAMPLE: Imagine a WebSocket connection that pushes live prices. In Vue, inside setup you declare a prices ref and a subscription variable. In onMounted you subscribe to the websocket stream and assign the emitted values to the ref. In onUnmounted you call unsubscribe on that variable. Alternatively, you could use watchEffect with onCleanup so the effect teardown automatically unsubscribes. In Svelte, if the stream is a store, you simply write the dollar-prefixed variable in the template and the compiler injects the lifecycle-bound subscription. If it is a raw RxJS Observable, you import onDestroy, subscribe in the script, and pass the unsubscribe function directly to onDestroy.