Vue3读源码 3

这篇主要读vue编译vdom，vnode的一些准备函数，整个vue就是在写函数，和有限个对象。废话不多说。

可以看到这是一批创造表达式的函数，拿其中一个出来看一下

function createRoot(children, loc = locStub) {
      return {                   // 返回一个对象
          type: 0 /* ROOT */,    // 类型，标识前面有定义
          children,              // 孩子，有的话就要递归
          helpers: [],           // 记录运行时需要的辅助的程序的数组
          components: [],        // 组件
          directives: [],        // 指令
          hoists: [],            // 提升钩子
          imports: [],           // 引入
          cached: 0,            // 是否缓存
          temps: 0,             // 是否有模板
          codegenNode: undefined,  //  真正产生的函数，后面会出现的
          loc                     // 位置相关的一个对象，前面有定义
      };
  }

以下函数的编译时用到的函数，先看默认编译配置

const defaultParserOptions = {             // 默认编译配置项
      delimiters: [`{{`, `}}`],            // {{}}里的内容
      getNamespace: () => 0 /* HTML */,    // 后面有定义
      getTextMode: () => 0 /* DATA */,     // 后面有定义
      isVoidTag: NO,                       // 是否空标签
      isPreTag: NO,                        // 是否预定义标签
      isCustomElement: NO,                //  是否经常出现的元素
      decodeEntities: (rawText) => rawText.replace(decodeRE, (_, p1) => decodeMap[p1]),
      onError: defaultOnError   // 编译出错时触发默认的错误
  };// 默认解析项

重点要看产生编译上下文环境的函数

到这里是2445行了，可以发现作者把一个复杂的功能不断的拆分，分成很多小函数，这样可以复用，代码结构也清晰，哦当然这是打包后的代码，原代码是用ts分包写的。