解释 Vue 3 源码中 `compiler-dom` 模块的职责，以及它如何处理浏览器 DOM 特有的编译任务。

各位观众老爷，晚上好！我是你们的老朋友，代码界的段子手——程序猿老王。今天咱们来聊聊 Vue 3 源码里一个关键的模块：compiler-dom。

咳咳，话不多说，开始今天的讲座！

compiler-dom：浏览器 DOM 的专属翻译官

Vue 3 的编译器，就像一位语言大师，能把我们写的模板代码（Template），翻译成浏览器能够理解的 JavaScript 代码，也就是渲染函数 (Render Function)。compiler-dom 模块，就是这位大师专门负责翻译浏览器 DOM 特有“语言”的“翻译官”。

简单来说，compiler-core 负责处理 Vue 模板的通用逻辑，而 compiler-dom 则在 compiler-core 的基础上，添加了针对浏览器 DOM 环境的特殊处理。它知道浏览器有哪些标签，哪些属性，以及如何高效地操作它们。

为啥需要 compiler-dom？

你可能会问，既然 compiler-core 已经能编译模板了，为啥还需要一个 compiler-dom 呢？ 这是因为不同的平台（比如浏览器、Weex、小程序）有不同的 DOM 实现和 API。compiler-core 只负责处理框架层面的逻辑，而 compiler-dom 则负责处理特定平台的 DOM 操作。

就像你跟外国人说话，用英语（compiler-core）可以进行基本交流，但如果你想用地道的俚语（DOM 特有操作），就需要一个专门的翻译（compiler-dom）了。

compiler-dom 到底干了啥？

compiler-dom 主要负责以下几方面的工作：

1. 识别和处理 DOM 特有的标签和属性： 比如 class、style、value、innerHTML 等。
2. 优化 DOM 操作： 尽量减少不必要的 DOM 操作，提高渲染性能。
3. 处理事件监听： 将模板中的事件绑定转换为浏览器支持的事件监听器。
4. 处理特殊元素： 比如 <input>、<textarea>、<select> 等，这些元素有特殊的属性和行为。
5. 提供平台相关的配置： 比如浏览器环境下的指令和组件。

compiler-dom 的核心流程

compiler-dom 的编译流程大致如下：

1. 解析 (Parse): 将模板字符串解析成抽象语法树 (AST)。这个阶段主要由 compiler-core 完成，compiler-dom 会提供一些平台相关的配置，比如自定义的标签和属性。
2. 转换 (Transform): 遍历 AST，对节点进行转换和优化。compiler-dom 会在这里处理 DOM 特有的逻辑，比如将 v-bind:class 转换为对 className 属性的操作。
3. 生成 (Generate): 将转换后的 AST 生成渲染函数代码。compiler-dom 会在这里生成针对浏览器 DOM 的渲染代码。

举个栗子：v-bind:class 的编译

咱们来看一个简单的例子，v-bind:class 指令是如何被 compiler-dom 处理的：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

1. 解析： 解析器会将这段模板解析成一个 AST 节点，其中包含 v-bind:class 指令的信息。
2. 转换： compiler-dom 会找到这个 v-bind:class 指令，并将其转换为对 className 属性的操作。它会生成一个 JavaScript 表达式，根据 isActive 和 hasError 的值来动态设置 className。
3. 生成： 生成器会根据转换后的 AST 节点，生成如下的渲染函数代码：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", {
    class: _normalizeClass({ active: _ctx.isActive, 'text-danger': _ctx.hasError })
  }))
}

在这个例子中，_normalizeClass 函数就是 compiler-dom 提供的一个工具函数，用于将 JavaScript 对象转换为 CSS 类名字符串。

代码示例：isBuiltInTag

compiler-dom 中一个重要的函数是 isBuiltInTag，它用于判断一个标签是否是浏览器内置的标签。

// packages/compiler-dom/src/transforms/transformElement.ts
const isBuiltInTag = /*#__PURE__*/ makeMap(
  'slot,component,template,transition,transition-group,keep-alive,suspense,suspense-list'
);

这个函数的作用是判断一个标签是否是 Vue 内置的组件标签。如果不是，那么就认为是 HTML 标准标签。

代码示例：transformStyle

transformStyle 函数负责处理 style 属性的编译。它会将模板中的 style 属性转换为浏览器可以识别的 CSS 样式。

// packages/compiler-dom/src/transforms/transformStyle.ts

import { isString } from '@vue/shared'
import { createSimpleExpression } from '@vue/compiler-core'

export function transformStyle(node, context) {
  if (node.type === 1 /* ELEMENT */) {
    const { props } = node
    let i = props.length
    while (i--) {
      const p = props[i]
      if (p.type === 7 /* ATTRIBUTE */) {
        if (p.name === 'style' && p.value) {
          // static style
          const staticStyle = parseStringStyle(p.value.content)
          if (staticStyle) {
            props.splice(i, 1)
            props.push({
              type: 6 /* DIRECTIVE */,
              name: 'bind',
              arg: createSimpleExpression('style', true),
              exp: createSimpleExpression(JSON.stringify(staticStyle), false),
              modifiers: []
            })
          }
        }
      } else if (p.type === 6 /* DIRECTIVE */ && p.name === 'bind' && p.arg && p.arg.content === 'style') {
        // dynamic style
        // already bound.
        return
      }
    }
  }
}

function parseStringStyle(input) {
  const result = {}
  const styles = input.split(';')
  for (let i = 0; i < styles.length; i++) {
    const style = styles[i].trim()
    if (!style) {
      continue
    }
    const parts = style.split(':')
    if (parts.length > 1) {
      const key = parts[0].trim()
      const value = parts.slice(1).join(':').trim()
      result[key] = value
    }
  }
  return result
}

这个函数会将静态的 style 属性转换为 v-bind:style 指令。例如，<div style="color: red; font-size: 16px;"> 会被转换为 <div v-bind:style="{ color: 'red', fontSize: '16px' }">。

compiler-dom 与 runtime-dom 的关系

compiler-dom 负责将模板编译成渲染函数，而 runtime-dom 负责执行这些渲染函数，并将结果渲染到浏览器 DOM 上。

compiler-dom 就像一个厨师，负责准备食材（编译模板），而 runtime-dom 就像一个服务员，负责将做好的菜（渲染结果）端给顾客（浏览器）。

compiler-dom 的配置

compiler-dom 提供了一些配置选项，用于自定义编译行为。这些配置选项可以在创建编译器实例时传入。

以下是一些常用的配置选项：

配置项	类型	描述
isCustomElement	(tag: string) => boolean	用于判断一个标签是否是自定义元素。如果是自定义元素，那么编译器会忽略它，不进行特殊处理。
isVoidTag	(tag: string) => boolean	用于判断一个标签是否是自闭合标签。比如 <br>、<hr> 等。
onError	(error: CompilerError) => void	用于处理编译过程中遇到的错误。
onWarn	(warning: CompilerError) => void	用于处理编译过程中遇到的警告。
whitespace	'preserve' | 'condense'	用于处理模板中的空白字符。preserve 表示保留所有空白字符，condense 表示将多个连续的空白字符合并成一个。

compiler-dom 的重要性

compiler-dom 是 Vue 3 编译器的重要组成部分。它负责处理浏览器 DOM 特有的编译任务，从而保证 Vue 应用能够在浏览器中正常运行。

没有 compiler-dom，Vue 就无法理解浏览器 DOM 的“语言”，也就无法将模板代码转换为浏览器能够理解的 JavaScript 代码。

总结

compiler-dom 就像一位精通浏览器 DOM 语言的翻译官，它将 Vue 模板代码翻译成浏览器能够理解的 JavaScript 代码，从而让 Vue 应用能够在浏览器中流畅运行。

希望今天的讲座能够帮助大家更好地理解 Vue 3 源码中的 compiler-dom 模块。

感谢各位的观看，咱们下期再见！

友情提示：

• 本文只是对 compiler-dom 模块的一个简单介绍，如果想深入了解，建议阅读 Vue 3 源码。
• compiler-dom 模块的代码比较复杂，需要一定的编译原理知识才能理解。
• 不要害怕阅读源码，源码是最好的老师。

各位观众老爷，如果觉得老王讲的还不错，记得点赞、收藏、转发哦！ 你们的支持是我最大的动力！ 溜了溜了~