vue3源码-编译系统

vue3源码主要分为三大块：编译系统、响应式系统、运行时系统。编译系统就是将template模板编译成为渲染函数；响应式系统就是监听响应式数据；运行时系统就是负责渲染，将虚拟节点渲染成为真正的dom元素并且显示在浏览器端。
具体来说：
一、响应式系统：实现了响应式对象的创建、依赖收集、依赖触发
二、编译系统：实现了如何将一个模板转换为render函数
三、运行时系统：实现了虚拟DOM转换为真实DOM，并且通过diff算法对比VNode

首先说说响应式系统：

1. 目录结构
   compiler-core: 编译解析核心,与具体环境无关,主要生成AST, 并根据AST生成render()方法
   compiler-dom: 浏览器环境中模板解析逻辑, 如处理HTML转义, 处理v-model等指令
   compiler-sfc: 负责解析Vue单文件组件
   compiler-ssr: 服务端渲染环境中的模板解析逻辑

2. 实现过程
   由一个模板生成为一个render函数需要经历3大过程：解释、转换、生成

   • 解释

   就是通过词法分析生成词法单元，通过语法分析生成模板AST（抽象语法树）

   • 转换

   将模板AST转换为JS AST
   这个阶段还会进行静态提升，即将模板中非动态的阶段给标注出来，在生成阶段可以将这部分代码仅执行一次，减少无效的更新

   • 生成

   根据JS AST是生成render函数