What Is Vue.js? Reactivity, Single-File Components, and Vapor Mode

It provides a declarative, component-based programming model designed to manage UI complexity through two core mechanisms: declarative rendering and reactivity. By extending HTML with a specialized template syntax, Vue lets you describe the relationship between state and the final output without writing manual DOM-manipulation logic.

The framework is engineered to be flexible and incrementally adoptable.

It stays lightweight by default while offering a mature ecosystem for state management, routing, and server-side integration.

What is Vue.js?

The technical foundation of Vue.js rests on its declarative rendering system. Unlike imperative approaches where you must manually update specific DOM nodes when data changes, Vue uses a template syntax that extends standard HTML. That syntax describes the desired HTML output as a direct reflection of the underlying JavaScript state. At runtime, Vue compiles these templates into highly optimized render functions that keep the view synchronized with application state.

At the heart of this process is a fine-grained reactivity system. Vue automatically tracks every reactive property accessed during rendering. When a property is mutated, the framework identifies exactly which parts of the UI are affected and updates the DOM efficiently. This removes the need for manual synchronization and prevents a large class of common UI bugs. An application is initialized from a central entry point, typically mounting an instance to a specific DOM element:

import { createApp } from "vue";
 
createApp({
  data() {
    return {
      count: 0,
    };
  },
}).mount("#app");

Adopting Vue requires a baseline familiarity with core web technologies — HTML, CSS, and JavaScript. Moving beyond simple script-tag integration to modern application development also calls for experience with terminal environments, Node.js, and package managers like npm or yarn. These tools enable Single-File Components and the build-time optimizations that matter for production software.

Why Vue is called a progressive framework

Vue is described as "progressive" because it avoids the all-or-nothing requirement common in monolithic frameworks. It can act as a lightweight enhancement for static HTML, be embedded as a Web Component on existing pages, or drive a full Jamstack, Static Site Generation (SSG), or Server-Side Rendering (SSR) architecture. Teams adopt the framework at the level their current constraints justify rather than over-engineering from the start.

The framework also holds a middle ground on tooling. The core team provides and maintains suggested libraries for essential concerns like routing (Vue Router) and state management (Pinia), but these stay unbundled and optional. That keeps the core small and lets you swap out specific parts of the stack — an external state management solution, for instance — without fighting the framework's design.

The progression follows a predictable path. A project might begin by importing Vue via a CDN-hosted <script> tag to add interactivity to a legacy application. As requirements grow, the team migrates to a full build-tool setup using Vite or webpack, enabling .vue files and TypeScript. This incremental path keeps the developer experience high whether the goal is a minor UI widget or a high-traffic enterprise dashboard.

Reactivity: why the UI updates when your data changes

Reactivity in Vue is often explained with a spreadsheet analogy. In a spreadsheet, if cell A2 contains the formula = A0 + A1, updating A0 makes A2 recalculate immediately. In standard JavaScript, variables do not observe each other; changing one does not affect its dependents unless something re-executes manually. Vue solves this by intercepting property access on JavaScript objects to build a dependency graph.

Vue 3 uses JavaScript Proxies to implement that interception. When a reactive property is read during the execution of a side effect — rendering a template, say — Vue performs a track operation, adding the current effect as a subscriber to that property. When the property is mutated later, Vue performs a trigger operation, notifying every subscriber to re-run and update the result, much like the automatic recalculation in a spreadsheet cell.

The following pseudo-code shows the logic of a reactive() function using the Proxy API to manage those internal track and trigger hooks:

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // Track the dependency when a property is accessed
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      // Update the value and notify subscribers
      target[key] = value;
      trigger(target, key);
      return true;
    },
  });
}

Single-File Components: template, script and style in one file

Most modern Vue development centers on the Single-File Component (SFC) format, denoted by the .vue extension. An SFC encapsulates the logic, template, and styling of a component in a single file, colocating concerns that are inherently coupled. It also improves encapsulation: the scoped attribute on the <style> block keeps CSS rules isolated to that component, preventing global style leakage across the application.

SFCs are not merely a convenience — they are what makes compile-time optimization possible. By pre-compiling templates into JavaScript via @vue/compiler-sfc, Vue avoids the overhead of runtime compilation. Build tools like Vite use SFCs to provide out-of-the-box Hot-Module Replacement, and cross-analysis of the template and script blocks lets the compiler generate the most efficient render functions possible while keeping local development responsive.

A standard SFC integrates all three blocks into one modular structure:

<script setup>
import { ref } from "vue";
const greeting = ref("Hello World!");
</script>
 
<template>
  <p class="greeting">{{ greeting }}</p>
</template>
 
<style scoped>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Composition API and Options API: which one should you use?

Vue supports two distinct API styles. The Options API is an object-based approach where logic is organized into predefined buckets such as data, methods, and mounted. It relies on a component instance context accessed via this, which makes it approachable and well-aligned with an object-oriented mental model. It remains a supported and effective choice for low-to-medium complexity scenarios.

The Composition API, typically written with <script setup>, is function-based and focused on logic composition. You declare reactive state and functions directly in a function scope, which enables better logic reuse through composables and considerably better TypeScript type inference. Because it relies on plain variables and functions rather than an instance proxy, minifiers process it more effectively, producing smaller production bundles.

Its main architectural advantage is more flexible code organization in complex components. Under the Options API, code serving a single logical concern — tracking folder state versus toggling hidden files, in a folder explorer — is forced into separate blocks, fragmenting the logic and adding a lot of scrolling. The Composition API lets you group everything related to one concern together, which makes large-scale refactoring and maintenance considerably more manageable.

Where Vue runs: from a script tag to SPA, SSR and Nuxt

Vue offers two primary paths depending on the project's scale. For simple progressive enhancement, you can include a CDN-hosted <script> tag. Core features such as data management and custom components then work directly in any HTML file with no build step. This path suits migrating legacy sites that still rely on older libraries for DOM manipulation.

For full-scale application development, the recommended starting point is the npm create vue@latest scaffolding tool. It generates a standardized project structure with a package.json for dependencies, a vite.config.js for the build server, and a src directory. The entry point is src/main.js, which initializes the Vue app and attaches it to index.html, keeping a clean separation between the host page and the application logic.

Beyond standard browser execution, Vue extends to Server-Side Rendering and Static Site Generation. These modes render Vue components to HTML on the server before hydrating them on the client, which matters for SEO and perceived performance in content-heavy applications. The same core knowledge applies whether you are building a small interactive widget or a complex, globally distributed application.

Vue 3.6 and Vapor Mode: dropping the Virtual DOM where speed matters

Vue 3.6 is a performance release. It carries a major reactivity refactor based on alien-signals that improves the reactivity system's memory usage and execution speed across the board. The most ambitious feature in this cycle is Vapor Mode, an opt-in compilation strategy that maximizes performance by removing the dependency on a Virtual DOM — the in-memory copy of the UI tree that a framework diffs against before it touches the real page.

Vapor Mode compiles templates into fine-grained DOM updates rather than Virtual DOM nodes. By bypassing VNode reconciliation, it reduces baseline bundle size and delivers performance comparable to frameworks like Solid and Svelte in third-party benchmarks. You can enable it per component by adding the vapor marker to the SFC tags, or build entire pure-Vapor applications with createVaporApp() to mount without pulling in any VDOM runtime code.

Coexistence between Vapor and VDOM components is handled by vaporInteropPlugin. Installed, it allows Vapor and non-Vapor components to nest inside each other, which is the migration path for existing applications. Vapor Mode is feature-complete as of the 3.6 RC, but it currently supports a subset of Vue's features and is specialized for performance-sensitive regions — reach for it on specific high-performance pages or small specialized applications, not as a blanket replacement for the VDOM.

How Vue differs from React

Both frameworks support component-based logic, but Vue's execution model differs in ways you feel day to day. In Vue, the setup() or <script setup> block runs exactly once during component initialization. That model matches standard JavaScript intuition and avoids the stale-closure problems inherent in React Hooks, where variables can be captured by old closures across repeated re-renders.

The run-once model also removes manual dependency management. In React, you maintain dependency arrays for useEffect and useMemo so hooks run at the right time. Vue's fine-grained reactivity system collects the dependencies used in computed properties and watchers automatically, which prevents a common class of React bugs where an omitted dependency leads to incorrect state or unnecessary re-renders.

Performance optimization is similarly automated. Because the framework tracks dependencies at a granular level, child components update only when their specific props change. In React, components often re-render by default, so you reach for useCallback or useMemo to prevent unnecessary child updates by hand. In Vue those optimizations are baked into the runtime.

When should you choose Vue for your project?

Vue suits projects that need room to scale without a steep entry cost. Its progressive nature lets a team start with a minimal footprint and adopt SFCs, TypeScript, and SSR only when the application's complexity justifies the overhead.

For low-to-medium complexity work, or for developers who prefer a class-like mental model, the Options API remains a solid and fully supported choice. For full-scale applications where logic reuse and strict typing are priorities, the Composition API combined with Single-File Components is the recommended standard — equally effective for legacy migrations and high-performance modern builds.

References

• Introduction | Vue.js
• Single-File Components | Vue.js
• Reactivity in Depth | Vue.js
• Composition API FAQ | Vue.js
• Ways of Using Vue | Vue.js
• Getting started with Vue - Learn web development | MDN
• Vue vs. React in 2026: How to pick the right framework — Vercel
• Releases · vuejs/core — GitHub