The compilation transformation of slot content

Compilation Transformation of Slot Content

Vue 3's slot mechanism undergoes a complex transformation process during the compilation phase. The slot content in templates is compiled into specific render function code, involving multiple key steps that ultimately generate highly efficient executable functions at runtime.

Compilation of Regular Slots

Regular slots are the most basic type of slots. When the compiler encounters a <slot> tag, it transforms it into a _renderSlot function call:

<!-- Template -->
<div>
  <slot></slot>
</div>

Compiled render function:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _renderSlot(_ctx.$slots, "default")
  ]))
}

Named slots are transformed similarly but specify the slot name:

<slot name="header"></slot>

Compilation result:

_renderSlot(_ctx.$slots, "header")

Transformation of Scoped Slots

Scoped slots allow child components to pass data to slot content. The compilation of such slots is more complex:

<slot :item="item" :index="index"></slot>

The compiled code generates a function containing slot props:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _renderSlot(_ctx.$slots, "default", {
      item: _ctx.item,
      index: _ctx.index
    })
  ]))
}

Compilation Handling of Slot Content

Slot content provided by parent components is compiled into functions. For default slots:

<ChildComponent>
  Default content
</ChildComponent>

Compilation result:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(ChildComponent, null, {
    default: () => [
      _createTextVNode(" Default content ")
    ],
    _: 1 /* STABLE */
  }))
}

When named slots use the v-slot syntax:

<ChildComponent>
  <template v-slot:header>
    <h1>Title</h1>
  </template>
</ChildComponent>

The compilation result includes a named slot function:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(ChildComponent, null, {
    header: () => [
      _createVNode("h1", null, "Title")
    ],
    _: 1 /* STABLE */
  }))
}

Compilation of Dynamic Slot Names

Dynamic slot names use square bracket syntax and are compiled into dynamic expressions:

<template v-slot:[dynamicSlotName]>
  Dynamic content
</template>

Compilation result:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(ChildComponent, null, {
    [_ctx.dynamicSlotName]: () => [
      _createTextVNode(" Dynamic content ")
    ],
    _: 1 /* STABLE */
  }))
}

Destructuring of Slot Scope

Scoped slots support destructuring syntax, which the compiler handles correctly:

<template v-slot="{ item, index }">
  {{ item.name }} - {{ index }}
</template>

Compilation result:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(ChildComponent, null, {
    default: ({ item, index }) => [
      _createTextVNode(_toDisplayString(item.name) + " - " + _toDisplayString(index), 1 /* TEXT */)
    ],
    _: 1 /* STABLE */
  }))
}

Slot Merging Strategy

When multiple slots with the same name exist, Vue merges them. The compiler generates a merged function:

<ChildComponent>
  <template v-slot:header>First</template>
  <template v-slot:header>Second</template>
</ChildComponent>

Compilation result:

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(ChildComponent, null, {
    header: [
      () => [_createTextVNode("First")],
      () => [_createTextVNode("Second")]
    ],
    _: 1 /* STABLE */
  }))
}

Performance Optimization Markers for Slots

The Vue 3 compiler adds optimization markers to slots. Static slots are marked as STABLE:

{
  default: () => [...],
  _: 1 /* STABLE */
}

Dynamic slots are marked as DYNAMIC:

{
  default: (_ctx.someCondition) ? () => [...] : () => [...],
  _: 2 /* DYNAMIC */
}

Internal Compiler Processing Flow

The complete compilation process for slot content includes the following steps:

1. Parsing phase: Identify <slot> tags and v-slot directives.
2. Transformation phase: Convert slot content into AST nodes.
3. Code generation: Generate render function code based on the AST.
4. Optimization phase: Mark static slots for performance optimization.

For scoped slots, the compiler additionally handles scope parameters:

<template v-slot:item="{ value }">
  {{ value }}
</template>

The generated code includes parameter destructuring:

{
  item: ({ value }) => [_createTextVNode(_toDisplayString(value), 1 /* TEXT */)],
  _: 1 /* STABLE */
}

Fallback Content for Slots

When no content is provided for a slot, fallback content is displayed. The compiler handles this case:

<slot>Default content</slot>

Compilation result:

_renderSlot(_ctx.$slots, "default", {}, () => [
  _createTextVNode("Default content")
])

Compile-Time Error Checking

The Vue compiler validates slot usage, such as:

• Duplicate slot names
• Invalid scope variables
• Misplaced v-slot directives

These checks occur during the compilation phase, allowing errors to be detected early.