Vapor Mode is Vue’s second compilation target. The default Vue compiler produces code that creates VNodes, and the runtime diffs those VNodes to determine what changed. Vapor Mode skips both steps: the template compiler analyzes the template at build time and emits JavaScript that creates DOM nodes directly and binds reactive effects to the specific…

Vue’s reactivity system wraps objects in Proxies to track property access and mutation. This is the mechanism that makes the UI reactive, but it is also a mechanism that some objects cannot tolerate. A third-party library instance that performs identity checks, a DOM node that the browser expects to be the exact object it created,…

Vue’s default reactivity is deep. A ref({ nested: { count: 1 } }) wraps every nested object in a Proxy, so mutating nested.count triggers a re-render. This is convenient, but it is also expensive for large data structures, external library instances, and immutable API responses that will never be mutated internally. shallowRef() and shallowReactive() provide…

Vue’s customRef is the escape hatch for creating a ref whose dependency tracking and update triggering are under explicit programmer control. A standard ref calls track() when read and trigger() when written, with no opportunity to intervene. customRef receives those two functions as arguments and returns a get/set pair, allowing the implementation to decide when…

Vue’s reactivity system exposes a small set of utility functions for inspecting and normalizing reactive values. These functions are not the ones application code uses most often—ref, computed, and reactive are—but they are the ones composables and libraries use to handle arguments that might be a raw value, a ref, or a reactive object. The…