The collaboration between the compiler and the runtime

Collaboration Between Compiler and Runtime

Vue 3's reactivity system is built on the close collaboration between the compiler and runtime. The compiler transforms templates into render functions, while the runtime executes these functions and manages reactive state. This division of labor allows Vue 3 to maintain development convenience while achieving high runtime performance.

Template Compilation Process

When Vue encounters a template, the compiler converts it into a JavaScript render function. This process involves several key steps:

1. Parsing: Converts the template string into an AST (Abstract Syntax Tree).
2. Transformation: Optimizes and transforms the AST.
3. Code Generation: Converts the AST into executable render function code.

// Example template
const template = `<div @click="handleClick">{{ message }}</div>`;

// The compiled render function roughly looks like this
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", {
    onClick: _ctx.handleClick
  }, _toDisplayString(_ctx.message), 1 /* TEXT */));
}

The compiler identifies directives, events, and interpolations in the template and converts them into corresponding JavaScript code. This transformation ensures the runtime doesn't need to handle complex template syntax, only standard JavaScript functions.

Runtime Optimizations

Vue 3's runtime includes numerous optimizations to improve performance:

1. Block Tree: Marks static nodes to reduce the scope of diff comparisons.
2. Patch Flags: Flags dynamic binding types during compilation, allowing the runtime to skip unnecessary checks.
3. Hoisting: Lifts static nodes outside the render function to avoid repeated creation.

// Template with static nodes
const template = `
  <div>
    <span>Static Content</span>
    <p>{{ dynamicText }}</p>
  </div>
`;

// Compiled code hoists static nodes
const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "Static Content", -1 /* HOISTED */);

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _createVNode("p", null, _toDisplayString(_ctx.dynamicText), 1 /* TEXT */)
  ]));
}

Reactivity System Integration

The compiler and runtime work together to implement Vue's reactivity system. During code generation, the compiler:

1. Identifies reactive references in the template.
2. Generates corresponding getter calls.
3. Establishes update mechanisms.

// Template
const template = `<div>{{ user.name }}</div>`;

// Compiled code accesses reactive properties
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, _toDisplayString(_ctx.user.name), 1 /* TEXT */));
}

When user.name changes, the runtime system triggers a component re-render. This mechanism is implemented via Proxy or defineProperty, with the compiler-generated code seamlessly integrating with the runtime system.

Directive Handling

Vue's directive system is another example of compiler-runtime collaboration. The compiler converts directives into runtime-understandable JavaScript code:

// v-if directive example
const template = `
  <div>
    <p v-if="show">Conditional Content</p>
  </div>
`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    (_ctx.show)
      ? (_openBlock(), _createBlock("p", { key: 0 }, "Conditional Content"))
      : _createCommentVNode("v-if", true)
  ]));
}

The compiler converts v-if into a ternary expression, allowing the runtime to evaluate a simple JavaScript condition to decide which node to render.

Event Handling

Event bindings are handled similarly:

// Event in template
const template = `<button @click="handleClick($event)">Click</button>`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("button", {
    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
  }, "Click"));
}

The compiler converts @click into an inline event handler, which the runtime simply binds to the DOM element.

Slot Mechanism

Slots demonstrate deeper compiler-runtime collaboration:

// Parent component template
const parentTemplate = `
  <Child>
    <template #default="{ user }">
      {{ user.name }}
    </template>
  </Child>
`;

// Child component template
const childTemplate = `
  <div>
    <slot :user="currentUser"></slot>
  </div>
`;

// Compiled parent render function
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(Child, null, {
    default: _withCtx(({ user }) => [
      _createTextVNode(_toDisplayString(user.name), 1 /* TEXT */)
    ]),
    _: 1 /* STABLE */
  }));
}

// Compiled child render function
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _renderSlot(_ctx.$slots, "default", { user: _ctx.currentUser })
  ]));
}

The compiler converts slot content into functions, which the runtime executes via _renderSlot, passing in scope parameters.

Static Hoisting and Tree Shaking

Vue 3's compiler identifies static content in templates and hoists it outside the render function:

// Template
const template = `
  <div>
    <h1>Static Title</h1>
    <p>{{ dynamicContent }}</p>
  </div>
`;

// Compiled code
const _hoisted_1 = /*#__PURE__*/_createVNode("h1", null, "Static Title", -1 /* HOISTED */);

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _createVNode("p", null, _toDisplayString(_ctx.dynamicContent), 1 /* TEXT */)
  ]));
}

This optimization reduces the number of VNodes created during each render, improving performance. Additionally, hoisted nodes are marked as PURE, enabling bundlers to perform tree-shaking optimizations.

Custom Directive Handling

Custom directives also showcase compiler-runtime collaboration:

// Using a custom directive in a template
const template = `<div v-my-directive:arg.modifier="value"></div>`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", {
    "directives": [
      {
        name: "my-directive",
        rawName: "v-my-directive:arg.modifier",
        value: _ctx.value,
        arg: "arg",
        modifiers: { modifier: true }
      }
    ]
  }));
}

The compiler converts directive information into an array of objects, which the runtime uses to locate and apply the corresponding directive logic.

Dynamic Component Handling

Dynamic components also rely on compiler-runtime collaboration:

// Using dynamic components in a template
const template = `<component :is="currentComponent"></component>`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.currentComponent)));
}

The compiler converts the component tag into a _createBlock call wrapped in _resolveDynamicComponent. The runtime resolves the actual component definition based on the current component name.

Compile-Time and Runtime Information Transfer

Vue 3 uses compile-time hints (like patch flags) to optimize runtime performance:

// Template
const template = `<div :class="dynamicClass">{{ dynamicText }}</div>`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", {
    class: _normalizeClass(_ctx.dynamicClass)
  }, _toDisplayString(_ctx.dynamicText), 3 /* TEXT, CLASS */));
}

Here, 3 is a patch flag indicating the element has dynamic text and class. The runtime uses this flag to skip checks for other attributes.

Composition API Support

Using reactive variables from the Composition API in templates also requires compiler-runtime collaboration:

// Component using Composition API
setup() {
  const count = ref(0);
  return { count };
}

// Template
const template = `<button @click="count++">{{ count }}</button>`;

// Compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("button", {
    onClick: _cache[0] || (_cache[0] = $event => (_ctx.count.value++))
  }, _toDisplayString(_ctx.count.value), 1 /* TEXT */));
}

The compiler automatically handles .value access, allowing refs to be used like regular properties in templates.

Type-Safe Templates

With TypeScript support, Vue 3 templates can also provide type safety:

// Typed component
defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // props.message has correct type hints here
  }
});

// Usage in template
const template = `<div>{{ message.toUpperCase() }}</div>`;

The compiler uses the component's type information to validate expressions in the template, ensuring type safety.

Server-Side Rendering Support

Compiler-runtime collaboration also extends to server-side rendering (SSR):

// Client-side template
const clientTemplate = `<div :id="dynamicId">{{ content }}</div>`;

// Compiled client-side code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", { id: _ctx.dynamicId }, _toDisplayString(_ctx.content), 1 /* TEXT */));
}

// Compiled server-side code
function ssrRender(_ctx, _push, _parent) {
  _push(`<div id="${_ctx.dynamicId}">${_ssrInterpolate(_ctx.content)}</div>`);
}

The compiler generates different render functions for different targets: virtual DOM for the client and direct HTML strings for the server.

Custom Renderer Support

Vue 3's architecture allows for custom renderers, which also rely on compiler-runtime conventions:

// Using a custom renderer
const { createApp } = createRenderer({
  createElement(type) {
    // Custom element creation logic
  },
  patchProp(el, key, prevValue, nextValue) {
    // Custom prop update logic
  }
  // ...other required methods
});

// Template compilation remains platform-agnostic
const template = `<my-element :custom-prop="value"></my-element>`;

// Compiled code remains the same
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("my-element", { "custom-prop": _ctx.value }));
}

The compiler generates platform-agnostic code, while the runtime implements platform-specific behavior via injected renderer methods.

Compile-Time Optimization Strategies

Vue 3's compiler implements multiple optimization strategies:

1. Static Node Hoisting: Lifts static nodes outside the render function.
2. Static Prop Hoisting: Lifts static prop objects as constants.
3. Inline Event Function Caching: Avoids recreating identical event handlers.
4. Patch Flag Marking: Identifies types of dynamic bindings.
5. Block Tree: Organizes dynamic nodes into a tree structure.

// Template before optimization
const template = `
  <div>
    <span v-for="item in list" :key="item.id">{{ item.text }}</span>
  </div>
`;

// Optimized compiled code
function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, 
    (_openBlock(true), _createBlock(_Fragment, null, 
      _renderList(_ctx.list, (item) => {
        return (_openBlock(), _createBlock("span", { key: item.id }, _toDisplayString(item.text), 1 /* TEXT */));
      }), 256 /* UNKEYED_FRAGMENT */)
    ))
}

These optimizations enable Vue 3's runtime to perform fewer operations, improving overall performance.

Source Code Structure Correspondence

In Vue 3's source code, compiler-runtime collaboration is evident in several key modules:

1. @vue/compiler-core: Core compiler logic.
2. @vue/compiler-dom: DOM-specific compiler.
3. @vue/runtime-core: Core runtime.
4. @vue/runtime-dom: DOM-specific runtime.

The compiler-generated code strictly corresponds to the runtime's API, ensuring compiled output executes correctly. For example, helper functions like _createVNode and _createBlock are explicitly defined in the runtime.