【Vue.js 3.0源码】AST 转换之节点内部转换

自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。

一、前言

template 的解析过程，最终拿到了一个 AST 节点对象。这个对象是对模板的完整描述，但是它还不能直接拿来生成代码，因为它的语义化还不够，没有包含和编译优化的相关属性，所以还需要进一步转换。举个例子：

<div class="app">
  <hello v-if="flag"></hello>
  <div v-else>
    <p>>hello {
  { msg + test }}</p>
    <p>static</p>
    <p>static</p>
  </div>
</div>

示例中，我们有普通的 DOM 节点，有组件节点，有 v-bind 指令，有 v-if 指令，有文本节点，也有表达式节点。

// 获取节点和指令转换的方法
const [nodeTransforms, directiveTransforms] = getBaseTransformPreset()
// AST 转换
transform(ast, extend({}, options, {
  prefixIdentifiers,
  nodeTransforms: [
    ...nodeTransforms,
    ...(options.nodeTransforms || []) // 用户自定义  transforms
  ],
  directiveTransforms: extend({}, directiveTransforms, options.directiveTransforms || {} // 用户自定义 transforms
  )
}))

对于这个模板，我们通过 parse 生成一个 AST 对象，先通过 getBaseTransformPreset 方法获取节点和指令转换的方法，然后调用 transform 方法做 AST 转换，并且把这些节点和指令的转换方法作为配置的属性参数传入。

function getBaseTransformPreset(prefixIdentifiers) {
  return [
    [
      transformOnce,
      transformIf,
      transformFor,
      transformExpression,
      transformSlotOutlet,
      transformElement,
      trackSlotScopes,
      transformText
    ],
    {
      on: transformOn,
      bind: transformBind,
      model: transformModel
    }
  ]
}

getBaseTransformPreset 返回节点和指令的转换函数,这些转换函数会在后续执行 tra