Vue.js的源码全部开源在github上,我们可以从github上克隆到本地,项目地址--https://github.com/vuejs/vue;以便于研究。
Vue.js 的项目源码都在 src 目录下,其目录结构如下。
src
├── compiler #
编译相关
├── core #
核心代码
├── platforms #
不同平台的支持
├── server #
服务端渲染
├── sfc # .vue
文件解析
├── shared #
共享代码
下面我们逐一来看这些子目录:
compiler------编译相关
compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树【抽象语法树】,ast 语法树优化,代码生成等功能。
编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。因为编译是一项耗性能的工作,所以更推荐前者——离线编译。
core-----核心代码
core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。
这里的代码可谓是 Vue.js 的灵魂,也是我们之后需要重点分析的地方。
components:内置组件
global-api:global API相关
instance:渲染辅助函数(事件、初始化、生命周期....)
observer:响应式数据相关(Vue的核心概念)
util:工具
vdom:虚拟树
platform-----不同平台的支持
Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex【类似于react native的跨端应用】 跑在 natvie 客户端上。platform 是 Vue.js 的入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上的 Vue.js。
server------服务端渲染相关
Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是跑在服务端的 Node.js,不要和跑在浏览器端的 Vue.js 混为一谈。服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。
sfc-------.Vue文件解析
通常我们开发 Vue.js 都会借助 webpack 构建, 然后通过 .vue 单文件的编写组件。这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
shared------共享代码
Vue.js 会定义一些工具方法,这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。
整个Vue的核心代码按照功能模块严格分割开来,利于学习和阅读。这点设计思想也可用于日常的代码设计中,利于提高代码的可维护性和可阅读性