01_vue目录设计以及Runtime-Only和RuntimeCompiler

vue是用Flow作为静态语法的检查工具，所以要读vue源码最好是了解下Flow或者是Typescript，个人感觉TS和Flow差距不大，以不变应万变，万变不离其中

 

Vue.js源码目录设计

vue.js的源码都在src目录下

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

compiler目录

包含Vue.js所有编译相关的代码。它包括把模板解析成ast语法树，ast语法树优化，代码生成等功能。编译的工作可以在构建时做（借助webpack、vue-loader等辅助插件）；也可以在运行时做，使用包含构建功能的Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

 

corecore目录

包含了Vue.js的核心代码，包括内置组件、全局API封装，Vue实例化、观察者、虚拟DOM、工具函数等等。这里的代码可谓是Vue.js的灵魂，也是我们之后需要重点分析的地方。

 

platform

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

 

server

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

 

sfc

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

 

shared

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

 

 

Runtime Only

我们在使用Runtime Only版本的Vue.js的时候，通常需要借助于如webpack的vue-loader工具把.vue文件编译成JavaScript，因为是在编译阶段做的，所以它只包含运行时的Vue.js代码，因此代码体积也会更轻量。

Runtime+Compiler

我们如果没有对代码做预编译，但又使用了Vue的template熟悉并传入一个字符串，则需要在客户端编译模板

//需要编译器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})

//这种情况不需要
new Vue({
render (h) {
return h('div', this.hi)
}