尝鲜Vue3之五：源码结构

目录

• 尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码
• 尝鲜Vue3之二：最重要的变化CompositionApi
• 尝鲜Vue3之三：CompositionAPI小结和包装对象
• 尝鲜Vue3之四：如何运行Jest单元测试
• 尝鲜Vue3之五：源码结构
• 尝鲜Vue3之六：响应式原理的革新 - Vue二、Vue3实现对比

代码结构

源码位置是在package文件件内，实际上源码主要分为两部分，编译器和运行时环境。

• 编译器

  • compiler-core 核心编译逻辑

    • 基本类型解析
    • AST

  • compiler-dom 针对浏览器的编译逻辑

    • v-html
    • v-text
    • v-model
    • v-clock

• 运行时环境

  • runtime-core 运行时核心
    • inject
    • 生命周期
    • watch
    • directive
    • component
  • runtime-dom 运行时针对浏览器的逻辑
    • class
    • style
  • runtime-test 测试环境仿真

    主要为了解决单元测试问题的逻辑 在浏览器外完成测试比较方便

• reactivity 响应式逻辑

• template-explorer 模板解析器 能够这样运行

  yarn dev template-explorer
  复制代码

  

  

  而后打开index.html

  

• vue 代码入口

  整合编译器和运行时

  

• server-renderer 服务器端渲染（TODO）

• share 公用方法

目录

• 尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码
• 尝鲜Vue3之二：最重要的变化CompositionApi
• 尝鲜Vue3之三：CompositionAPI小结和包装对象
• 尝鲜Vue3之四：如何运行Jest单元测试
• 尝鲜Vue3之五：源码结构
• 尝鲜Vue3之六：响应式原理的革新 - Vue二、Vue3实现对比