1. ├─dist                   # 项目构建后的文件
  2. ├─scripts                # 与项目构建相关的脚本和配置文件
  3. ├─flow                   # flow的类型声明文件
  4. ├─src                    # 项目源代码
  5. │    ├─complier          # 与模板编译相关的代码
  6. │    ├─core              # 通用的、与运行平台无关的运行时代码
  7. │    │  ├─observe        # 实现变化侦测的代码
  8. │    │  ├─vdom           # 实现virtual dom的代码
  9. │    │  ├─instance       # Vue.js实例的构造函数和原型方法
  10. │    │  ├─global-api     # 全局api的代码
  11. │    │  └─components     # 内置组件的代码
  12. │    ├─server            # 与服务端渲染相关的代码
  13. │    ├─platforms         # 特定运行平台的代码，如weex
  14. │    ├─sfc               # 单文件组件的解析代码
  15. │    └─shared            # 项目公用的工具代码
  16. └─test                   # 项目测试代码

DOM-Diff

模板编译

Vue源码解析 - 图1

Virtual Dom 算法的实现也就是以下三步

  1. 通过 JS 来模拟创建 DOM 对象
  2. 判断两个对象的差异
  3. 渲染差异