🧠 1. Design goals of Vue3 Virtual DOM

Vue3's Virtual DOM is not a pure VDOM like React, but:

"Virtual DOM with compilation optimization" template → Compiler → Minimized VDOM object + static tags (patchFlags) → Runtime diff faster

The core design of Vue3 is: Reduce the amount of VDOM calculations, reduce the number of comparisons, and generate content that can be determined at compile time as much as possible.

So it's faster than React, especially with a lot of static templates.

🧩 2. Vue3 rendering process (runtime)

Vue3 mainly consists of two parts:

• reactivity responsive system - responsible for dependency tracking
• runtime-core rendering system - responsible for VDOM → DOM

The general process of rendering is as follows:

template  →  compiler-dom (生成 render 函数)
                ↓
            render() 生成 vnode 树
                ↓
            patch(vnode, container)
                ↓
            操作真实 DOM

Vue3's render function is used internally:

• h() / createVNode(): Create a virtual node
• patch(): Compare old and new vnodes
• effect(): component rendering responsive collector

🔧 3. What is VNode (virtual node)?

JS object, used to describe the DOM:

const vnode = {
  type: 'div',
  props: { id: 'app' },
  children: 'Hello'
}

Vue3 internally uses createVNode() to create:

export function createVNode(type, props, children) {
  return {
    type,
    props,
    children,
    shapeFlag: xxx,     // 节点类型（元素、组件、文本…）
    patchFlag: xxx,     // 静态标记（更快 diff）
  }
}

Key fields:

• shapeFlag: Quickly determine node type (no need for frequent typeof)
• patchFlag: optimization flag injected during compilation (to avoid full diff)

🎯 4. How to trigger re-rendering in a responsive system?

The reactive core of Vue3 is:

• effect(fn): Collect dependencies (component rendering function)
• track(): record dependencies
• trigger(): trigger update (scheduling rendering)

When the component is mounted, it will be executed:

effect(() => {
  component.update()
})

When responding to data changes:

trigger(obj.key)
  → scheduler
     → 重新执行组件的 update() → patch()

🔵 The key here: the rendering function itself is an effect, so data changes = regenerate vnode tree → diff

🧮 5. Diff process (core patch)

The core logic of Vue3 patch:

patch(n1, n2, container) {
  if (!n1) {
    mount(n2)
  } else if (n1.type !== n2.type) {
    replace(n1, n2)
  } else {
    patchElement()
  }
}

Difference type:

• props change → patchProps
• children change → patchChildren
• text → patchText

🔥 6. The most important optimization of Vue3: patchFlags (generated by the compiler)

One of the biggest differences between Vue3 and React: The compiler's early optimization of diff.

For example:

<div :id="dynamic" class="static">Hello</div>

After compilation render:

return (openBlock(), createElementBlock(
  "div",
  {
    id: dynamic
  },
  "Hello",
  8 /* PROPS */,
  ["id"]
))

Among them:

• patchFlag = 8 (PROPS) → means only props change, and only "id" is dynamic

Vue runtime can do:

Only patch "id", not diff other attributes No diff class (static) Do not diff children (static)

📌 Vue3’s static enhancement and patchFlag optimization make its rendering performance far superior to React’s pure VDOM diff.

🧱 7. Hoist static

If there are static nodes:

<div><span>static</span></div>

It will be hoisted outside the rendering function:

const _hoisted_1 = /*#__PURE__*/ createVNode("span", null, "static");

return () => (
  createVNode("div", null, [_hoisted_1])
)

Static nodes do not participate in diff! This is the biggest performance advantage of Vue 3.

🍃 8. Rendering mechanism of Fragment / Teleport / Suspense

Fragment

A component can return multiple root nodes, and multiple children are specially handled during internal patching.

Teleport

When rendering, it does not operate in the parent component, but moves the DOM directly to the specified container.

Suspense

Handle asynchronous component rendering, fallback → resolve → patch.

🚀 9. Vue3 rendering process overview diagram (very critical)

       template
          ↓
     compiler-dom
 (静态提升 + patchFlags)
          ↓
      render()
          ↓
      createVNode()
          ↓
        effect()
(初次渲染收集依赖)
          ↓
        patch()
      /    |    \
 mount  diff  update props
          ↓
     update DOM

数据变化 → trigger → effect → patch → DOM 更新

After reading this, you will already have a framework-level understanding of the Vue3 rendering mechanism.