# Vue.js 2 Administrator & Developer Guide
## 1. Architecture Overview
Vue.js 2.7.16 is a progressive JavaScript framework for building user interfaces. It implements a reactive data-binding system powered by `Object.defineProperty` getter/setter interception, a virtual DOM diffing engine, and a template compiler that transforms HTML-based templates into render functions. The framework is designed as a monorepo of four packages that work together: the core runtime, a template compiler, a Single File Component (SFC) compiler, and a server-side renderer.
Vue uses a mixin-based architecture where the `Vue` constructor function is progressively enhanced through a series of `*Mixin` calls (`initMixin`, `stateMixin`, `eventsMixin`, `lifecycleMixin`, `renderMixin`) that attach prototype methods and instance initialization logic. The Global API (`Vue.use`, `Vue.extend`, `Vue.mixin`, `Vue.component`, `Vue.directive`, `Vue.filter`) is installed separately via `initGlobalAPI`.
Version 2.7 is the final minor release of Vue 2 and backports the Composition API from Vue 3 (`ref`, `reactive`, `computed`, `watch`, `setup()`, lifecycle hooks, dependency injection, effect scope) while maintaining full backward compatibility with the Vue 2 Options API.
### Architecture Diagram
```text
┌─────────────────────────────────────────────────────────────────┐
│ Vue Instance │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐ │
│ │ initMixin│ │stateMixin│ │eventsMixin│ │lifecycleMixin │ │
│ │ (_init) │ │($data, │ │($on,$off, │ │($forceUpdate, │ │
│ │ │ │ $watch) │ │ $emit) │ │ $destroy) │ │
│ └──────────┘ └──────────┘ └──────────┘ └────────────────┘ │
│ ┌────────────────┐ │
│ │ renderMixin │ │
│ │ ($nextTick, │ │
│ │ _render) │ │
│ └────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Global API │
│ Vue.use ─ Vue.mixin ─ Vue.extend ─ Vue.component │
│ Vue.directive ─ Vue.filter ─ Vue.set ─ Vue.delete │
│ Vue.nextTick ─ Vue.observable ─ Vue.compile │
├─────────────────────────────────────────────────────────────────┤
│ Core Systems │
│ ┌──────────────┐ ┌────────────┐ ┌──────────────────────┐ │
│ │ Observer │ │ Compiler │ │ Virtual DOM │ │
│ │ (reactive │ │ (template │ │ (VNode, patch, │ │
│ │ system) │ │ → render │ │ diff engine) │ │
│ │ Dep ←→ │ │ fns) │ │ │ │
│ │ Watcher │ │ │ │ │ │
│ └──────────────┘ └────────────┘ └──────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ V3 Compat Layer (src/v3/) │
│ ref ─ reactive ─ computed ─ watch ─ provide/inject │
│ effectScope ─ defineComponent ─ defineAsyncComponent ─ h │
│ onMounted ─ onUnmounted ─ onBeforeMount ─ onUpdated ─ etc. │
├─────────────────────────────────────────────────────────────────┤
│ Platform Layer │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Web Platform (src/platforms/web/) │ │
│ │ DOM operations ─ v-model ─ v-show ─ transitions │ │
│ │ class/style/attrs/events modules ─ compiler directives │ │
│ └──────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Packages (monorepo) │
│ @vue/compiler-sfc ─ vue-server-renderer ─ vue-template-compiler │
└─────────────────────────────────────────────────────────────────┘
```
### Component Inventory
| Component | Path | Role |
|---|---|---|
| Core Runtime | `src/core/` | Vue constructor, reactivity, lifecycle, events, global API |
| Observer System | `src/core/observer/` | `Object.defineProperty`-based reactive data tracking |
| Virtual DOM | `src/core/vdom/` | VNode creation, patch/diff algorithm, component lifecycle |
| Template Compiler | `src/compiler/` | HTML parser → AST → code generator (render functions) |
| Web Platform | `src/platforms/web/` | DOM operations, platform-specific directives, transition modules |
| V3 Compat | `src/v3/` | Composition API backport (reactivity, lifecycle, DI) |
| SFC Compiler | `packages/compiler-sfc/` | `.vue` file parsing, `` tags and other dangerous sequences.
```javascript
// Custom serializer (if needed)
const renderer = createRenderer({
serializer: (state) => {
return myCustomSerializer(state, { isJSON: true })
}
})
```
> [!WARNING]
> When embedding serialized state in HTML templates, ensure the template uses `{{{ }}}` (triple-mustache / raw) for the state injection point so that the serialized output is not double-escaped.
### Render Proxy (Development)
In development mode, Vue wraps component instances in a `Proxy` (when available) that warns about:
- Access to undefined properties on the render context
- Mutations during rendering
- Reserved property names (`$`, `_` prefix)
This proxy is stripped in production builds.
### Bundle Renderer Sandboxing
The `createBundleRenderer` evaluates server bundles in a sandboxed context by default (`runInNewContext: true`). Each request gets a fresh global context. Options:
| Value | Behavior | Performance |
|---|---|---|
| `true` | New `vm.Context` per request | Slowest, most isolated |
| `'once'` | One shared context, created once | Medium |
| `false` | Run in current process context | Fastest, shared global state |
## 8. Developer Internals
### Repository Structure
```text
vuejs/vue/
├── src/ # Core source code
│ ├── compiler/ # Template compiler
│ │ ├── parser/ # HTML parser → AST
│ │ │ ├── index.ts # Main parser (parse())
│ │ │ ├── html-parser.ts # Tokenizer for HTML
│ │ │ ├── text-parser.ts # Mustache interpolation parser
│ │ │ ├── filter-parser.ts # Pipe filter expression parser
│ │ │ └── entity-decoder.ts # HTML entity decoding
│ │ ├── codegen/ # AST → render function code
│ │ │ ├── index.ts # Main code generator
│ │ │ └── events.ts # Event handler code generation
│ │ ├── directives/ # Compiler directive transforms
│ │ │ ├── bind.ts # v-bind compilation
│ │ │ ├── model.ts # v-model compilation
│ │ │ └── on.ts # v-on compilation
│ │ ├── optimizer.ts # Static tree hoisting
│ │ ├── create-compiler.ts # Compiler factory
│ │ ├── to-function.ts # Compile string → function
│ │ ├── error-detector.ts # Template expression validation
│ │ ├── codeframe.ts # Error location display
│ │ ├── helpers.ts # Shared compiler utilities
│ │ └── index.ts # Compiler entry (baseCompile)
│ ├── core/ # Core runtime
│ │ ├── config.ts # Vue.config definition
│ │ ├── index.ts # Core entry (initGlobalAPI)
│ │ ├── global-api/ # Vue.use, Vue.mixin, Vue.extend, etc.
│ │ ├── instance/ # Instance init, state, events, lifecycle, render
│ │ ├── observer/ # Reactivity: Observer, Dep, Watcher, scheduler
│ │ ├── vdom/ # Virtual DOM: VNode, patch, createElement
│ │ ├── components/ # Built-in components (KeepAlive)
│ │ └── util/ # Debug, env detection, error handling, nextTick
│ ├── platforms/web/ # Web platform layer
│ │ ├── compiler/ # Web-specific compiler modules
│ │ ├── runtime/ # DOM operations, directives, transitions
│ │ ├── util/ # Web utilities (attrs, class, style, element)
│ │ └── entry-*.ts # Build entry points
│ ├── shared/ # Shared constants and utilities
│ │ ├── constants.ts # LIFECYCLE_HOOKS, ASSET_TYPES, SSR_ATTR
│ │ └── util.ts # Utility functions (extend, cached, looseEqual)
│ ├── v3/ # Vue 3 Composition API backport
│ │ ├── reactivity/ # ref, reactive, computed, readonly, effectScope
│ │ ├── sfc-helpers/ # useCssModule, useCssVars
│ │ ├── apiWatch.ts # watch, watchEffect, watchPostEffect, watchSyncEffect
│ │ ├── apiLifecycle.ts # onMounted, onUnmounted, etc.
│ │ ├── apiInject.ts # provide, inject
│ │ ├── apiSetup.ts # setup(), SetupContext, useSlots, useAttrs
│ │ ├── apiAsyncComponent.ts # defineAsyncComponent
│ │ ├── h.ts # h() render helper
│ │ ├── currentInstance.ts # getCurrentInstance
│ │ ├── debug.ts # DebuggerOptions, DebuggerEvent
│ │ └── index.ts # V3 API exports + defineComponent
│ └── types/ # Internal TypeScript type definitions
├── packages/
│ ├── compiler-sfc/ # @vue/compiler-sfc
│ │ └── src/
│ │ ├── parse.ts # SFC file parser
│ │ ├── parseComponent.ts # Component descriptor extraction
│ │ ├── compileScript.ts #