Virtual DOM in Vue — Complete Guide

// Vue 3 reactivity system
import { ref, reactive, computed, watchEffect } from 'vue';

const count = ref(0);
const user = reactive({ name: 'Alice', age: 30 });

// The render function is wrapped in a watcher
// It re-runs only when its reactive dependencies change
function render() {
    // This creates a VNode tree
    return h('div', [
        h('p', 'Count: ' + count.value),
        h('p', 'Name: ' + user.name),
        h('p', 'Age: ' + user.age)
    ]);
}

// When count.value changes:
// 1. The reactive system notifies subscribers
// 2. The render function re-runs
// 3. A new VNode tree is created
// 4. The patch function diffs old and new trees
// 5. Only changed DOM nodes are updated

// If only count changes, user.name and user.age are not re-evaluated
// Only the count paragraph is updated in the DOM

// Vue template:
// <div>
//   <h1>{{ title }}</h1>
//   <p class="static">Static content</p>
//   <p :class="dynamicClass">{{ dynamicText }}</p>
// </div>

// Compiled render function (simplified):
function render(_ctx, _cache) {
    return h('div', [
        h('h1', _ctx.title),                          // DYNAMIC: text content
        h('p', { class: 'static' }, 'Static content'), // STATIC: never changes
        h('p', {
            class: _ctx.dynamicClass,                  // DYNAMIC: class binding
            patchFlag: 16  // PatchFlags.CLASS
        }, _ctx.dynamicText)                            // DYNAMIC: text content
    ])
}

// Patch flags tell the runtime exactly what to check:
// PatchFlags.TEXT = 1      // Only text content changed
// PatchFlags.CLASS = 16    // Only class changed
// PatchFlags.STYLE = 32    // Only style changed
// PatchFlags.PROPS = 8     // Only props changed

// During patching:
// If patchFlag is 1 (TEXT), only update textContent
// No need to check class, style, or other attributes
// This avoids unnecessary attribute comparisons

// Vue template:
// <div>
//   <span class="static">Always the same</span>
//   <span>{{ dynamic }}</span>
// </div>

// Compiled output (simplified):
// Static node is hoisted — created only once
const _hoisted_1 = h('span', { class: 'static' }, 'Always the same');

function render(_ctx, _cache) {
    return h('div', [
        _hoisted_1,  // Reused across renders, no diff needed
        h('span', _ctx.dynamic)  // Only this needs checking
    ]);
}

// Static hoisting benefits:
// 1. Static VNodes are created once
// 2. No diffing needed for hoisted nodes
// 3. Less memory allocation per render
// 4. Faster reconciliation for static parts

// Simplified Vue 3 patch function
function patch(oldVNode, newVNode, container) {
    if (oldVNode === newVNode) {
        return;  // Same reference, nothing to do
    }

    if (oldVNode && oldVNode.type !== newVNode.type) {
        // Different types: unmount old, mount new
        unmount(oldVNode);
        oldVNode = null;
    }

    const { type, shapeFlag } = newVNode;

    switch (type) {
        case Text:
            // Text node: update textContent
            processText(oldVNode, newVNode, container);
            break;
        case Comment:
            processComment(oldVNode, newVNode, container);
            break;
        case Fragment:
            // Fragment: patch children only
            processFragment(oldVNode, newVNode, container);
            break;
        default:
            if (shapeFlag & ShapeFlags.ELEMENT) {
                // Regular DOM element
                processElement(oldVNode, newVNode, container);
            } else if (shapeFlag & ShapeFlags.COMPONENT) {
                // Component
                processComponent(oldVNode, newVNode, container);
            }
    }
}

// Element patching with patch flags
function patchElement(oldVNode, newVNode) {
    const el = newVNode.el = oldVNode.el;
    const { patchFlag, dynamicChildren } = newVNode;

    if (patchFlag) {
        // Optimized path: only check what the flag indicates
        if (patchFlag & PatchFlags.CLASS) {
            // Only update className
            hostPatchProp(el, 'class', null, newVNode.props.class);
        }
        if (patchFlag & PatchFlags.STYLE) {
            // Only update style
            hostPatchProp(el, 'style', null, newVNode.props.style);
        }
        if (patchFlag & PatchFlags.TEXT) {
            // Only update textContent
            el.textContent = newVNode.children;
        }
        // No need to check other attributes
    } else {
        // Full diff path (for dynamic templates)
        patchProps(oldVNode.props, newVNode.props, el);
    }

    // Patch children if not optimized
    if (!newVNode.dynamicChildren) {
        patchChildren(oldVNode, newVNode, el);
    }
}

// React:
// - Renders entire component tree on any state change
// - Uses Fiber for interruptible rendering
// - Diffing happens at runtime only
// - No compile-time optimizations
// - Concurrent mode for prioritization

// Vue 3:
// - Tracks dependencies at property level
// - Only re-renders components whose dependencies changed
// - Compile-time optimization (patch flags, hoisting)
// - Block tree optimization (dynamic children tracking)
// - No concurrent mode (simpler scheduling)

// Performance characteristics:
// React: More runtime overhead, better for highly dynamic UIs
// Vue: Less runtime overhead due to compile-time optimizations

// Simple benchmark:
function measureReRender() {
    const vueComponent = createVueComponent();
    const reactComponent = createReactComponent();

    // Update a single property
    console.time('Vue update');
    for (let i = 0; i < 1000; i++) {
        vueComponent.count = i;
    }
    console.timeEnd('Vue update');

    console.time('React update');
    for (let i = 0; i < 1000; i++) {
        reactComponent.setCount(i);
    }
    console.timeEnd('React update');
}