@vue/compiler-core模块

一、概述

1. 是什么：
   • @vue/compiler-core是vue3里的一个核心模块
2. 干什么：
   • 负责处理模板编译的核心逻辑，将模板编译成渲染函数
3. 模块目录结构：
   • package.json：
     • 包含模块的相关信息
   • index.js：
     • 模块的入口文件
   • _tests_文件夹：
     • 包含模块的单元测试代码，用于确保模块的正确性
   • src文件夹：（核心）
     • 包含模块源代码
       • ast.ts 
         • 包含与抽象语法树（AST）相关的类型和工具函数
           • AST用于在编译过程中表示模板的抽象结构
       • babelUtils.ts  - 提供了与Babel相关的实用工具，用于在编译过程中与Babel进行交互
       • codegen.ts  - 包含用于将AST节点生成JS代码的逻辑
       • compile.ts
         • 包含编译器的主要逻辑，负责将模板转换为渲染函数
       • errors.ts 
         • 定义了在编译过程中可能抛出的错误类型
       • index.ts
         • 模块的主入口文件，导出了模块的公共接口
       • options.ts
         • 包含与编译选项相关的类型和逻辑，允许用户配置编译过程的行为
       • parse.ts
         • 包含解析器的逻辑，负责将模板解析为 AST
       • runtimeHelpers.ts
         • 提供了运行时辅助函数，被生成的渲染函数调用以实现模板的正确执行
       • transform.ts
         • 包含了与AST变换相关的逻辑，允许开发者在编译过程中对AST进行自定义的转换
       • utils.ts
         • 提供了各种工具函数，用于在编译过程中处理不同的逻辑
       • validateExpression.ts
         • 包含了验证表达式的逻辑，确保它们符合语法规范

一、文件重要部分

1. ast.ts：
   • 创建、处理虚拟节点：
     • 虚拟节点：
       • 用于表示模板中的元素或组件，并在渲染过程中构建实际的DOM元素或组件实例
     • 相关函数实现：
       • createVNodeCall()
       • getVNodeHelper()
       • getVNodeBlockHelper()
   • createVNodeCall()：创建虚拟节点的函数

   export function createVNodeCall(
     context: TransformContext | null,//获取有关编译环境的信息
     tag: VNodeCall['tag'],//表示要创建的元素或组件的类型
     props?: VNodeCall['props'],//表示VNode的属性
     children?: VNodeCall['children'],//表示VNode的子节点
     //表示VNode的patch标志，用于标识如何更新VNode
     patchFlag?: VNodeCall['patchFlag'],
     //表示动态属性的列表，用于表示哪些属性是动态的
     dynamicProps?: VNodeCall['dynamicProps'],
     //表示指令的列表，用于表示在元素上应用的指令
     directives?: VNodeCall['directives'],
     isBlock: VNodeCall['isBlock'] = false,//表示是否将VNode包装为块级别的节点
     //表示是否禁用节点的跟踪
     disableTracking: VNodeCall['disableTracking'] = false,
     //表示是否创建一个组件类型的 VNode
     isComponent: VNodeCall['isComponent'] = false,
     loc = locStub//表示节点的位置信息
   ): VNodeCall {
   //首先检查是否传递了上下文对象
     if (context) {
     //如果有传递：
     //则使用上下文中的信息生成一些 帮助函数(用于处理VNode的创建)
       if (isBlock) {
         context.helper(OPEN_BLOCK)
         context.helper(getVNodeBlockHelper(context.inSSR, isComponent))
       } else {
         context.helper(getVNodeHelper(context.inSSR, isComponent))
       }
       if (directives) {
         context.helper(WITH_DIRECTIVES)
       }
     }
     //返回一个表示VNode的对象
     return {
       type: NodeTypes.VNODE_CALL,
       tag,
       props,
       children,
       patchFlag,
       dynamicProps,
       directives,
       isBlock,
       disableTracking,
       isComponent,
       loc
     }
   }
   

   • getVNodeHelper()：创建虚拟节点的帮助函数

   export function getVNodeHelper(ssr: boolean, isComponent: boolean) {
   //ssr：表示是否在服务器端渲染(SSR)模式下
   //isComponent：表示是否创建一个组件类型的VNode
     return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE
   }
   

   • getVNodeBlcokHelper()：创建虚拟节点的帮助函数

   export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
     return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK
   }
   

-----续更. . .