Vue编译器不运行时搜集v-if分支，而是通过AST分析在生成渲染函数时构造嵌套createBlock()调用；每个分支为独立更新边界，静态内容被提升，动态依赖被精准标记。
Vue 编译器处理 v-if 分支，不是靠运行时“搜集”或维护一棵叫 BlockTree 的树，而是通过静态 AST 分析，在生成渲染函数时主动构造嵌套的块调用结构。所谓“稳定”，指的是：每个分支被隔离在独立更新边界内，彼此不干扰，且静态内容被跳过、动态依赖被精准标记。
v-if 分支如何被编译成块结构
当编译器遍历到带 v-if 的元素节点，它会做三件事：
- 将该节点及其整个子树（含子组件、插槽、v-for 等）包裹进
createBlock()调用中，形成一个 conditional block - 把
v-if、v-else-if、v-else分支分别转为 JavaScript 条件表达式，每个分支内部再根据需要开启自己的子 block - 对分支内纯静态内容（如无绑定的文本、class、style）自动提升（hoist），运行时不创建 VNode，也不参与 diff
为什么多个 v-if 分支不会互相污染
每个 v-if 分支在编译后都拥有自己的更新边界，关键在于：
- 分支之间没有共享的响应式依赖——它们各自读取不同的 ref 或 reactive 字段，触发更新时只重跑对应分支的渲染逻辑
- 父级 block 不会强制 patch 子分支；只有该分支自身依赖变化时，才进入其内部的
patchBlockChildren - 即使某个分支内嵌了
v-for，编译器也会确保循环体属于该分支的 block 作用域，不会越界影响其他分支
Block Tree 如何应对嵌套与混合指令
真实模板常出现 v-if 和 v-for 同级、或 v-if 包裹 v-for 的情况。编译器有明确优先级和降级策略：
- 当
v-if和v-for同时写在同一个标签上，编译器会把v-if下移到每个循环项的根节点，让每个 item 独立判断，避免整个列表被一个条件锁死 - 当
v-if包裹v-for，外层形成 conditional block，内层v-for则生成 keyed block（带openBlock(true)），两者嵌套但职责分明 - 若分支内含子组件且 props 全为静态值，该组件会被识别为“稳定”，编译器可能将其整个提升为静态节点，彻底跳过响应式追踪
开发者能做的关键配合点
Block Tree 的优化效果高度依赖模板写法。以下实践可强化稳定性：
- 避免在
v-if条件中使用复杂计算或副作用函数，保持依赖路径清晰可静态分析 - 给
v-for加:key，否则编译器无法启用 keyed block 模式，可能退化为全量 diff - 用
<template v-if>包裹多元素时，注意它本身不产生 DOM，但会生成一个 block 容器，适合组织逻辑分组 - 静态 class/style 尽量不用绑定语法，比如写
class="btn"而非:class="['btn']"，便于 hoist 提升
