The compilation result of dynamic binding

Basic Concepts of Dynamic Binding

In Vue 3, dynamic binding primarily refers to the attribute binding mechanism implemented through v-bind or its shorthand :. Unlike static attributes, dynamically bound values can be reactive data, where the DOM automatically updates when the data changes. This feature is one of the core functionalities of Vue's reactivity system.

<template>
  <div :class="dynamicClass">Dynamic Binding Example</div>
</template>

<script setup>
import { ref } from 'vue'

const dynamicClass = ref('active')
</script>

Compilation Process Analysis

The Vue template compiler transforms dynamic bindings into specific JavaScript code. For the example above, the compiled render function roughly looks like this:

import { createElementVNode as _createElementVNode } from "vue"

export function render(_ctx, _cache) {
  return _createElementVNode("div", {
    class: _ctx.dynamicClass
  }, "Dynamic Binding Example", 2 /* CLASS */)
}

The key detail is the 2 /* CLASS */ at the end, which is a patchFlag used to optimize the update process.

The Role of patchFlag

patchFlag is an important mechanism for performance optimization in Vue 3. It is a bitmask that marks the type of dynamic binding:

export const enum PatchFlags {
  CLASS = 1 << 1,        // 2
  STYLE = 1 << 2,        // 4
  PROPS = 1 << 3,        // 8
  FULL_PROPS = 1 << 4,   // 16
  HYDRATE_EVENTS = 1 << 5, // 32
  // ...other flags
}

During the diff algorithm, Vue uses patchFlag to quickly determine which attributes need comparison, avoiding unnecessary full comparisons.

Compilation Details for Dynamic Attributes

For different types of dynamic bindings, the compiler generates different patchFlag values:

1. Single dynamic class:

// Template
<div :class="cls"></div>

// Compiled output
_createElementVNode("div", { class: _ctx.cls }, null, 2 /* CLASS */)

2. Mixed static and dynamic classes:

// Template
<div class="static" :class="dynamic"></div>

// Compiled output
_createElementVNode("div", {
  class: ["static", _ctx.dynamic]
}, null, 2 /* CLASS */)

3. Dynamic style:

// Template
<div :style="styleObj"></div>

// Compiled output
_createElementVNode("div", {
  style: _ctx.styleObj
}, null, 4 /* STYLE */)

Handling Complex Dynamic Bindings

When an element has multiple dynamic bindings, the compiler merges the patchFlag values:

// Template
<div :class="cls" :style="styles" @click="handler"></div>

// Compiled output
_createElementVNode("div", {
  class: _ctx.cls,
  style: _ctx.styles,
  onClick: _ctx.handler
}, null, 6 /* CLASS, STYLE */)

Note that event listeners do not generate a patchFlag because they are not targets for reactive updates.

Special Handling for Dynamic Props

Dynamic binding for component props involves more complex processing:

// Template
<MyComponent :value="count" :disabled="isDisabled" />

// Compiled output
_createElementVNode(MyComponent, {
  value: _ctx.count,
  disabled: _ctx.isDisabled
}, null, 8 /* PROPS */, ["value", "disabled"])

Here, besides the patchFlag=8 indicating dynamic props, an additional array ["value", "disabled"] explicitly specifies which props are dynamic.

Compilation Optimization and Static Hoisting

The Vue 3 compiler performs static analysis on templates, hoisting static content outside the render function:

// Template
<div :class="dynamicClass">
  <span>Static Content</span>
</div>

// Compiled output
const _hoisted_1 = _createElementVNode("span", null, "Static Content")

function render(_ctx, _cache) {
  return _createElementVNode("div", {
    class: _ctx.dynamicClass
  }, [_hoisted_1], 2 /* CLASS */)
}

The static node _hoisted_1 is created only once and reused during subsequent updates.

Compilation of Dynamic Components

Dynamic components use the <component :is> syntax, and their compilation differs:

// Template
<component :is="currentComponent" />

// Compiled output
_createElementVNode(_ctx.currentComponent, null, null, 0, {
  __isComponent: true
})

Here, a special attribute marker __isComponent identifies this as a dynamic component.

Compilation Handling for Directives

Directives like v-model are compiled into specific code structures:

// Template
<input v-model="text" />

// Compiled output
_createElementVNode("input", {
  "onUpdate:modelValue": $event => (_ctx.text = $event),
  modelValue: _ctx.text
}, null, 8 /* PROPS */, ["modelValue"])

Here, v-model is expanded into a modelValue prop and an update:modelValue event.

Compilation of Scoped Slots

Dynamic binding for scoped slots involves more complex processing:

// Template
<MyComponent>
  <template #default="{ data }">
    {{ data }}
  </template>
</MyComponent>

// Compiled output
_createElementVNode(MyComponent, null, {
  default: _withCtx(({ data }) => [
    _createTextVNode(_toDisplayString(data), 1 /* TEXT */)
  ]),
  _: 1 /* STABLE */
})

The _ attribute marks whether the slot content is stable, which helps optimize updates.

Special Considerations for Dynamic Keys

The key attribute, as a special case, has its own dynamic binding logic:

// Template
<div v-for="item in list" :key="item.id"></div>

// Compiled output
_createElementVNode("div", {
  key: item.id
}, null, 0)

Note that the patchFlag for key is 0 because it does not participate in regular prop comparisons.

Static Analysis by the Compiler

The Vue 3 compiler performs in-depth static analysis to determine the optimal compilation strategy:

1. Identifies purely static nodes
2. Detects static props
3. Analyzes dynamic binding types
4. Determines patchFlag combinations
5. Decides whether to perform static hoisting

This analysis ensures the generated render functions are as efficient as possible.

Special Handling for Server-Side Rendering

In SSR scenarios, the compilation output for dynamic bindings differs:

// Client-side compilation
_createElementVNode("div", { class: _ctx.cls }, null, 2 /* CLASS */)

// SSR compilation
_resolveComponent("div"), { class: _ctx.cls }, null)

SSR does not require patchFlag or reactive update logic, so the generated code is simpler.

Compilation of Custom Directives

Custom directives are compiled into special object structures:

// Template
<div v-my-directive:arg.modif="value"></div>

// Compiled output
_withDirectives(_createElementVNode("div", null, null, 0), [
  [_directive_myDirective, _ctx.value, "arg", { modif: true }]
])

The _withDirectives helper function handles directive logic.

Dynamic Binding and TypeScript

The Vue 3 compiler can leverage TypeScript type information to optimize compilation:

// Using typed props in templates
<MyComponent :count="num" />

// Compilation considers type constraints for `count`
_createElementVNode(MyComponent, {
  count: _ctx.num
}, null, 8 /* PROPS */, ["count"])

Type information helps the compiler generate more precise runtime validation code.

Runtime Validation for Dynamic Binding

The compiled code includes validation logic for dynamic bindings:

// For required props
if (!_ctx.requiredProp) {
  warn("Missing required prop: 'requiredProp'")
}

This validation helps developers catch errors during development.

Performance Optimization Practices

Based on dynamic binding compilation characteristics, some optimization strategies can be applied:

1. Separate static and dynamic classes where possible:

// Better than :class="['static', dynamicCls]"
<div class="static" :class="dynamicCls"></div>

2. Avoid complex expressions in templates:

// Not recommended
<div :class="`btn-${type} ${active ? 'active' : ''}`"></div>

// Recommended
<div :class="computedCls"></div>

3. Use caching appropriately:

// Cached dynamic attributes
_createElementVNode("div", _cache[1] || (_cache[1] = { class: _ctx.cls }))

Edge Cases for Dynamic Binding

Special scenarios require attention:

1. Dynamic binding to null or undefined:

// Template
<div :class="maybeNull"></div>

// Rendered output equivalent to
<div class></div>

2. Dynamic binding to non-reactive objects:

const staticObj = { foo: 'bar' }
// Will not trigger updates
<div :class="staticObj"></div>

3. Dynamic component names with special characters:

// Requires additional handling
<component :is="'my-component'"></component>

Compiler Configuration Options

Compiler options can influence the output of dynamic binding compilation:

const { compile } = require('@vue/compiler-dom')

const { code } = compile(template, {
  hoistStatic: true,  // Enable static hoisting
  cacheHandlers: true, // Cache event handlers
  prefixIdentifiers: true // For strict mode
})

These options allow optimization for different scenarios.