In Vue 3's renderer, what is a block, what does its dynamicChildren array hold, and why do v-if and v-for start new blocks?

## What a block is The Vue docs define a **block** as a part of the template with a **stable inner structure**: the same nodes, in the same positions, on every render. In compiled output a block is created with a pair of calls: ```js (_openBlock(), _createElementBlock("div", null, [ /* children */ ])) ``` - `openBlock()` pushes a fresh array onto a stack of open blocks. - While the children are being created, every vnode that has a **positive patch flag**, and every **component** vnode, is pushed into the current open array. Components are always tracked, because even a component that does not need to update must hand its instance on to the new vnode. - `createElementBlock()` then closes the block and stores the array on the block vnode as **`dynamicChildren`**. The block itself is pushed into its parent block's array, so blocks nest. The array is **flat**: it contains dynamic descendants from any depth, not just direct children. Static wrappers in between simply do not appear. This is **tree flattening**. ## How patching uses it On update, if the new vnode has `dynamicChildren`, the renderer runs `patchBlockChildren`: it walks the old and new arrays **pairwise by index** and patches each pair, typically on the fast path chosen by the vnode's patch flag. Everything that is not in the array (static wrappers, static text, static attributes) is never visited. ```html <div> <!-- root block --> <div>...</div> <!-- not tracked --> <div :id="id"></div> <!-- tracked --> <div> <!-- not tracked --> <div>{{ bar }}</div> <!-- tracked --> </div> </div> ``` Here the root block's `dynamicChildren` is just two elements, however deep and wide the static parts are. ## Why structural directives start new blocks Pairwise matching by index is only valid if the old and new arrays describe the **same set of dynamic nodes in the same order**. Structural directives break that: 1. **`v-if` / `v-else`** switch between branches that contain different nodes. The compiler therefore makes each branch its own block, with a distinct `key` (0, 1, 2, ...). The parent block tracks the branch block as a single entry, so the parent's array keeps a stable shape; when the branch changes, the different key means the old block is replaced rather than matched node by node. 2. **`v-for`** produces a variable number of items. The list becomes a fragment created with `openBlock(true)`, which disables collection inside it; its items are diffed by the keyed or unkeyed children algorithm (flag `KEYED_FRAGMENT` or `UNKEYED_FRAGMENT`), and each item is typically its own block. 3. An element with a dynamic `key` also becomes its own block, since a changed key means a different node. ## Safety valves - If an old and new block disagree on the length of `dynamicChildren`, the renderer abandons the fast path and does a **full diff** for that element. - A `-2 /* BAIL */` patch flag turns off optimized mode for a subtree. - A **hand-written render function** does not open blocks, so its vnodes have no `dynamicChildren` and are fully diffed. ## A worked trace Take the compiled example in this answer's code sample: a `<section>` wrapping a `<p>{{ a }}</p>`, followed by a `<p v-if="ok">{{ b }}</p>`. 1. `openBlock()` opens the root array. 2. The `section` is created without a flag, so it is not collected; the inner `<p>` carries `1 /* TEXT */` and is pushed. 3. The `v-if` branch opens its own block, closes it, and pushes itself as one entry; when `ok` is false, a comment placeholder is created instead. 4. `createElementBlock('div', ...)` stores the two collected entries as `dynamicChildren`. 5. On the next update, the renderer patches those two entries pairwise and never visits the `section`. ## Why this matters beyond updates The docs note that patch flags and tree flattening also speed up **SSR hydration**: only block nodes and their dynamic descendants need to be traversed, which amounts to partial hydration at the template level. ## Mapping it back to templates | Template construct | Block behaviour | |---|---| | component root template | one root block | | `v-if` / `v-else-if` / `v-else` branch | its own keyed block, tracked by the parent | | `v-for` | fragment block with tracking disabled; items diffed as a list | | element with dynamic `key` | its own block | | static wrapper element | not tracked at all |