Vue源码学习之核心目录分析

在 github下载Vue源码后在本地编辑器打开src文件夹：

compiler

目录 包含了 Vue.js 所有编译相关的代码。它包括把所有模板解析成 ast 语法树， ast 语法树优化，代码生成等功能。

core

目录 包含了 Vue.js 的核心代码，包括内置组件，全局API封装，Vue 实例化，观察者，虚拟DOM, 工具函数等等。

（1）components 包含抽象出来的通用组件。
（2）global-api 包含给 Vue 构造函数挂在全局（静态方法）或属性的代码
（3）instance 包含 Vue 构建函数设计相关的代码（实例化）
（4）observer 响应式系统相关，包含数据观测的核心代码
（5）until 包含一些工具函数
（6）vdom 包含虚拟DOM 创建（creation）和打补丁(patching) 的代码

platform

Vue.js 是一个跨平台的MVVM 框架，它可以跑在web上，可以跑在weex 跑在，native客户端上，platform 是Vue.js 的入口，2 个目录代表2主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下，注意，这部部分代码是跑在服务端的 Node.js, 不要和跑在浏览器端的 Vue.js 混为一谈。

sfc

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

shared

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和 服务端的 Vue.js 所共享的。

简要概括：

• src 源码
  • compiler 模版编译代码
  • core 核心代码
    • components 内置组件代码
    • global-api 全局api代码
    • instance 实例化相关代码
    • observer 响应式数据相关
    • util 工具方法
    • vdom 虚拟dom相关代码
  • platforms 跨平台代码
    • web web端
    • weex native端
  • server 服务端渲染相关代码
  • sfc 转换.vue后缀单文件
  • shared 全局共享的变量/方法