Vue2源码梳理：关于vue2的源码目录设计与相关模块作用分析

Vue @ 2.x 源码目录结构

Vue.js 的源码都在 src 目录下，其目录结构如下

1 ）vue@2.6.14 以下

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

• 主要围绕这个目录来进行展开

2 ） vue@2.7.0 以上

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── types           # 类型定义文件，用于支持TS
├── v3              # vue3中的一些核心代码
├── shared          # 共享代码
├── global.d.ts     # .d.ts 全局类型

• 这里我们不做伸展，看vue3.x源码更合适一些，毕竟是中间的过渡版本

核心目录解析

1 ）compiler

• vue@2.0很大的改进是 virtual dom, virtual dom 的生成实际执行的是 render function
• 我们写vue代码的时候，很少去手写 render function，而是用写 template 来代替
• 其实 从 template 到 render function 相关逻辑就在这个目录中
• compiler 目录包含 Vue.js 所有编译相关的代码
• 它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能
• 编译的工作可以在构建时做（借助 webpack、vue-loader等辅助插件）
• 也可以在运行时做，使用包含构建功能的 Vue.js
• 显然，编译是一项耗性能的工作，所以更推荐前者——离线编译

2 ）core

• core 这这个目录，它又分为很多很多子目录
• 比如说像内置组件，keep-alive 是放在这里的
• core 目录下的 global-api目录下
  • extend.js
  • mixin.js
  • assets.js
  • use.js
• core 目录下的 instance 目录下
  • events.js
  • init.js
  • inject.js
  • lifecycle.js
  • proxy.js
  • render.js
  • state.js
• core 目录下的 observer 目录下
  • array.js
  • dep.js
  • scheduler.js
  • traverse.js
  • watcher.js
  • 这些和响应式数据相关，是vue的核心
• core 目录下的 util 目录下
  • debug.js
  • env.js
  • error.js
  • lang.js
  • next-tick.js
  • perf.js
  • props.js
• core 目录下的 vdom 目录下
  • create-component.js
  • create-element.js
  • create-functional-component.js
  • patch.js
  • vnode.js
  • vdom目录是vue@2.x的重大核心

3 ） platforms

• platforms 它有两个子目录，一个是web，一个是weex
• web就是我们平时开发的浏览器的程序
• weex呢是vue推出的一个类似于react-native的一个跨端的应用
• 这两个目录的存在，说明，vue既可以编译出在浏览器运行的框架
• 也可以在其他平台下，比如 weex
• 美团开源的 mpvue 也是在 platforms 下 扩展了 mp 的目录
• 在 web 目录下
  • compiler 与web编译有关
  • runtime 与web运行时有关
  • server 与服务端渲染有关
  • util web的相关工具类
• weex 目录用的不多，就不去展开
• Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上
• platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js

4 ） server

• 所有跟服务端渲染的相关的代码都在这个目录下
• 2.0 推出以后，server-render 也是一个比较核心的一个功能
• Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下
• 注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈
• 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

5 ）sfc

• sfc 就是一个简单的解释器
• 通常我们开发 Vue.js 都会借助 webpack 构建， 然后通过 .vue 单文件来编写组件
• 这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象

6 ） shared

• shared是一些辅助的方法，比如说像一些常量啊，一些工具方法
• 它是可以被我们的像 core 或者是 compiler等等这些和我们的platforms所有的目录共享的一些辅助方法
• Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的

7 ）总结

• 从 Vue.js 的目录设计可以看到，作者把功能模块拆分的非常清楚
• 相关的逻辑放在一个独立的目录下维护，并且把复用的代码也抽成一个独立目录
• 这样的目录设计让代码的阅读性和可维护性都变强，是非常值得学习和推敲的
• 这点也可以作为我们写js库的范本
• 通过模块化的方式，让这些模块之间相互引用
• 最终通过编译工具再生成一个独立的js
• vue它虽然把这些代码呢都拆成这些目录，最终也是通过rollup打包成一个单独的js