How does Angular's Zone.js change detection differ from Vue and Svelte reactivity?

WHAT THIS TESTS: Whether you understand the architectural granularity of reactivity models and can articulate why Angular's legacy Zone.js approach incurs different performance costs than Vue's Proxy system or Svelte's compiler-driven runes. Interviewers want to see you know Angular is transitioning to Signals, not just reciting documentation.

A GOOD ANSWER COVERS: First, explain that Angular's traditional change detection is coarse-grained: Zone.js monkey-patches browser async APIs like setTimeout and Promise to notify Angular after every async task, prompting a top-down dirty-check of the component tree regardless of which state changed. Second, contrast this with Vue 3's fine-grained runtime reactivity: JavaScript Proxies intercept property access to build a dependency graph automatically, so only subscribers to a specific ref or reactive object re-run. Third, describe Svelte 5's fine-grained compiler approach: runes like state and derived are processed at build time into direct DOM binding updates, eliminating virtual DOM and runtime diffing overhead entirely. Fourth, address performance implications: Zone.js introduces monkey-patch overhead and wastes cycles checking components unaffected by a state change, which scales poorly in large trees; Vue and Svelte avoid this by narrowing updates to exact consumers. Fifth, mention Angular's modern pivot: Signals introduced in Angular 16 track their own consumers and enable zoneless change detection, moving Angular toward fine-grained reactivity similar to Vue but with explicit signal reads rather than transparent Proxies.

COMMON WRONG ANSWERS: Calling Zone.js fine-grained or claiming it tracks individual dependencies. Saying Angular currently requires Zone.js without acknowledging the optional zoneless Signals path. Confusing Svelte's runes with runtime reactivity like Vue; Svelte's optimization happens at compile time. Attributing Vue's reactivity to a compiler step instead of runtime Proxies. Ignoring performance entirely or hand-waving that Angular is slow without citing tree-scanning overhead.

LIKELY FOLLOW-UPS: How would you optimize a large Angular application still using Zone.js? When would you choose OnPush change detection and what are its limitations compared to Signals? How does Angular Signals explicit consumer tracking differ from Vue's automatic Proxy trapping? If Svelte compiles away reactivity, what debugging tradeoffs exist?

ONE CONCRETE EXAMPLE: Imagine a dashboard with 500 components where only one nested counter increments. In legacy Angular with Zone.js, the counter click triggers Zone.js after the async event, and Angular dirty-checks all 500 components. In Vue, the counter ref change notifies only the computed or DOM nodes that read it, skipping the other 499. In Svelte 5, the compiler already wired the $state variable directly to that specific text node, so the update is a single DOM operation with no runtime tree traversal at all.

Source: blog.openreplay.com