Vue SSR 源码解析：ssrProcessIf 条件渲染的服务端转换逻辑

在 Vue 的服务端渲染（SSR）编译阶段，v-if / v-else-if / v-else 指令需要被转换为可在服务器端执行的渲染逻辑，以生成正确的 HTML 输出。

本文将深入解析 ssrProcessIf 的源码结构、原理设计、与编译端差异，并逐步讲解如何生成对应的 SSR 代码节点。

一、概念层：`ssrProcessIf` 的职责定位

在 Vue 的编译流程中：

第一阶段（AST 构建） ：通过 createStructuralDirectiveTransform 注册结构性指令（如 v-if、v-for）。
第二阶段（SSR 转换） ：根据 AST 节点生成服务端可执行代码段。

ssrProcessIf 属于第二阶段函数，其主要任务是：

将编译器 DOM 层的 IfNode（即 v-if、v-else-if、v-else）转换为 SSR 环境下可执行的 JavaScript 条件语句（if / else if / else），并构建对应的渲染逻辑块（BlockStatement）。

二、原理层：源码解构与逻辑流程

完整源码如下（附详细注释）：

typescript 复制代码

import {
  type BlockStatement,
  type IfBranchNode,
  type IfNode,
  type NodeTransform,
  NodeTypes,
  createBlockStatement,
  createCallExpression,
  createIfStatement,
  createStructuralDirectiveTransform,
  processIf,
} from '@vue/compiler-dom'
import {
  type SSRTransformContext,
  processChildrenAsStatement,
} from '../ssrCodegenTransform'

// (1) 注册指令 transform，用于第一阶段 AST 构建
export const ssrTransformIf: NodeTransform = createStructuralDirectiveTransform(
  /^(?:if|else|else-if)$/, // 匹配三种 v-if 指令
  processIf, // 使用 compiler-dom 中的基础逻辑
)

// (2) SSR 阶段：根据 AST 生成服务端代码结构
export function ssrProcessIf(
  node: IfNode,
  context: SSRTransformContext,
  disableNestedFragments = false,
  disableComment = false,
): void {
  const [rootBranch] = node.branches

  // 2.1 生成第一个 if 语句
  const ifStatement = createIfStatement(
    rootBranch.condition!,
    processIfBranch(rootBranch, context, disableNestedFragments),
  )
  context.pushStatement(ifStatement)

  // 2.2 遍历后续的 else-if / else 分支
  let currentIf = ifStatement
  for (let i = 1; i < node.branches.length; i++) {
    const branch = node.branches[i]
    const branchBlockStatement = processIfBranch(
      branch,
      context,
      disableNestedFragments,
    )
    if (branch.condition) {
      // else-if 分支
      currentIf = currentIf.alternate = createIfStatement(
        branch.condition,
        branchBlockStatement,
      )
    } else {
      // else 分支
      currentIf.alternate = branchBlockStatement
    }
  }

  // 2.3 无 else 分支时插入空注释节点
  if (!currentIf.alternate && !disableComment) {
    currentIf.alternate = createBlockStatement([
      createCallExpression(`_push`, ['`<!---->`']), // 输出空注释占位
    ])
  }
}

// (3) 处理单个分支的内部 children
function processIfBranch(
  branch: IfBranchNode,
  context: SSRTransformContext,
  disableNestedFragments = false,
): BlockStatement {
  const { children } = branch
  const needFragmentWrapper =
    !disableNestedFragments &&
    (children.length !== 1 || children[0].type !== NodeTypes.ELEMENT) &&
    // 优化：单一子节点为 ForNode 时可跳过 Fragment 包裹
    !(children.length === 1 && children[0].type === NodeTypes.FOR)
  return processChildrenAsStatement(branch, context, needFragmentWrapper)
}

🧩 核心逻辑分层解析

层次	功能说明
`ssrTransformIf`	注册 AST 转换插件，识别所有 v-if 指令。
`ssrProcessIf`	将 AST 的 `IfNode` 转换为 SSR 语句树（JavaScript 逻辑块）。
`processIfBranch`	将分支的子节点转换为渲染语句体，自动判断是否需要 `<template>` Fragment 包裹。
`_push('<!-- -->')`	无匹配分支时，输出 SSR 空注释（与客户端渲染一致）。

三、对比层：SSR vs Client 编译逻辑

项目	客户端编译（`compiler-dom`）	服务端编译（`compiler-ssr`）
输出目标	渲染函数（`_createVNode` 等）	字符串拼接输出（`_push()` 调用）
条件控制	通过 `createConditionalExpression` 生成三元表达式	通过 `createIfStatement` 生成实际 JS if/else 语句
空分支处理	输出 `null`	输出 HTML 注释 `<!---->`
Fragment 包裹	依赖 runtime 渲染优化	在编译阶段判断是否合并 Fragment

→ 总结：

客户端编译偏向运行时动态决策（虚拟 DOM diff），

而 SSR 编译是静态化、预展开的逻辑树，追求"可直接输出字符串"的高效性。

四、实践层：示例推演

假设我们有如下模板：

css 复制代码

<div>
  <div v-if="ok">A</div>
  <div v-else-if="maybe">B</div>
  <div v-else>C</div>
</div>

经过 ssrProcessIf 转换后，内部会生成伪代码结构如下：

css 复制代码

if (ok) {
  _push(`<div>A</div>`)
} else if (maybe) {
  _push(`<div>B</div>`)
} else {
  _push(`<div>C</div>`)
}

若缺省 v-else，则输出：

xml 复制代码

if (ok) {
  _push(`<div>A</div>`)
} else {
  _push(`<!---->`)
}

→ 这种方式保证了 SSR 输出的 HTML 结构与客户端渲染保持一致。

五、拓展层：相关模块联动

processChildrenAsStatement

负责将模板的子节点编译为 BlockStatement，以便在 SSR 环境中可按顺序 _push()。
SSRTransformContext

上下文对象，包含：
- _push() 输出流管理；
- 静态/动态片段收集；
- 嵌套片段（Fragment）处理开关；
createIfStatement

内部封装为标准的 AST IfStatement，确保输出 JS 可被后续 Codegen 阶段直接序列化为字符串。

六、潜在问题与优化方向

多层嵌套条件的代码量膨胀
- SSR 输出的是纯 JS 控制流，会导致分支较多时体积增长。
- 可考虑后续阶段引入"条件预计算"或"短路优化"。
Fragment 包裹判断逻辑复杂
- 当前通过节点类型和数量判断，边界情况（如 v-if 内包裹 template）可能出现过包或漏包。
可调试性弱
- SSR 阶段生成的 _push 调用在调试时可读性差，未来可考虑引入 Source Map 或结构化渲染树调试器。

总结

ssrProcessIf 是 Vue SSR 编译器中处理条件渲染的关键模块。

它通过静态化展开条件逻辑、生成 JS 控制流语句，实现了与客户端一致的输出结果。

这一设计体现了 "运行时动态性 → 编译期确定性" 的 Vue SSR 架构哲学。

本文部分内容借助 AI 辅助生成，并由作者整理审核。