编译器宏魔法：编写自定义编译时转换修改模板语法

利用Vue的compiler-sfc插件系统，编写自定义转换器在编译阶段将特定v-指令或模板语法替换为高级功能（如v-memo自动推导依赖）。 · 难度：入门 · +10XP

编译器宏魔法

Vue的SFC编译器支持自定义插件，允许你在编译时操作AST（抽象语法树）。本教程将创建一个自定义转换插件，识别模板中的v-magic指令，自动分析表达式中的依赖并生成v-memo。你还将学会如何修改模板中的属性、添加空白节点，以及处理错误。这是构建DSL（领域特定语言）的入门技巧。

// compiler-plugin.js
module.exports = function magicPlugin() {
  return {
    visitor: {
      DirectiveTransform(dir, node) {
        if (dir.name === 'magic') {
          // 将 v-magic 转换为 v-memo，并注入依赖
          return {
            props: [
              { name: 'memo', exp: dir.exp }
            ]
          }
        }
      }
    }
  }
}
// 在vite.config中配置：vue({ compilerOptions: { nodeTransforms: [magicPlugin] } })