Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features

Vue’s internal architecture can be divided into three major modules: reactivity , runtime, and compiler, along with several smaller utilities.

Reactivity : Vue 2 implements reactivity using Object.defineProperty, which can only observe specified object properties via their getter and setter, leading to issues when new properties are added after initialization. Vue 2’s Vue.$set can manually add reactive properties, but this is not ideal for the automatic reactivity system.

Vue 3 replaces the Object.defineProperty approach with the ES6 Proxy and Reflect APIs. The reactive method creates a proxy instance that tracks changes for complex data types, while the ref method handles primitive values by wrapping them in a RefImpl class whose .value getter/setter trigger updates.

Runtime : The runtime primarily consists of a renderer object with three core methods: render (handles rendering logic), hydrate (handles server‑side rendering), and createApp (creates a Vue application instance). Vue 3 abstracts host‑environment specifics via interfaces, allowing the renderer to work in non‑browser environments.

Compiler : Vue’s compiler is a domain‑specific language (DSL) that transforms template syntax into a render function through three stages: parse (template → AST), transform (AST → JavaScript AST), and generate (JavaScript AST → render function). This process may involve a finite state machine for complex cases.

Additional changes in Vue 3 include the Composition API (with setup as the entry point), where setup can return an object (exposed to the template) or a function (used as the render function). Vue 3.2 introduces the script setup syntax sugar to reduce boilerplate and avoid large “setup” functions.

Other minor updates are the inclusion of built‑in components such as Fragment, Teleport, and Suspense, which further enhance the framework’s capabilities.