Vue 是什么？
在每次初始化Vue，使用 时，不难发现Vue其实是一个类，通过层层追踪终于找到Vue被定义的地方：
// src / core / instance / index.js
function Vue(options) {
...
this._init(options)
}
这就是Vue最初定义的地方，当执行 new Vue 时，内部会执行 this._init(options)，将初始化的参数传入。
Vue源码其实可以理解为一棵树，我们看之前最好要确定看什么功能，然后避开那些分叉逻辑，接下来从 new Vue() 开始解析，走完一整条从初始化、数据劫持、模板编译、到真实的DOM整个流程。
在Vue内部，_符号开头定义的变量是供内部私有使用的，而$符号开头定义的变量是供用户使用的，而用户自定义的变量不能以_和$开头，防止内部冲突。
接着看Vue实例创建：
// src / core / instance / index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
function Vue(options) {
...
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
可以看到 Vue 是通过 ES5 构造函数创建，为什么不使用 ES6 class 类来创建呢？网上许多回答是：因为这样可以方便的把 Vue 的功能拆分到不同目录中去维护，将Vue构造函数传入这些方法中，来给Vue原型上扩展方法。但目前个人认为两种方式没有区别。
- initMixin(Vue)：定义_init方法。
- stateMixin(Vue)：定义数据相关的方法$set,$delete,$watch方法。
- eventsMixin(Vue)：定义事件相关的方法$on，$once，$off，$emit。
- lifecycleMixin(Vue)：定义_update，及生命周期相关的$forceUpdate和$destroy。
- renderMixin(Vue)：定义$nextTick，_render将render函数转为vnode。
这些方法都是在各自的文件内维护的，从而让代码结构更加清晰易懂可维护。如this._init方法被定义在：
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
...当执行new Vue时，进行一系列初始化并挂载
}
}
这些xxxMixin完成后，接着会定义一些全局的API：
export function initGlobalAPI(Vue) {
Vue.set方法
Vue.delete方法
Vue.nextTick方法
...
内置组件：
keep-alive
transition
transition-group
...
initUse(Vue)：Vue.use方法
initMixin(Vue)：Vue.mixin方法
initExtend(Vue)：Vue.extend方法
initAssetRegisters(Vue)：Vue.component，Vue.directive，Vue.filter方法
}
可以看到Vue的设计架构是分层次的，最底层是一个ES5构造函数，再上层在原型上会定义一些_init、$watch、_render等这样的方法，再上层会在构造函数自身定义全局的一些API，如set、nextTick、use等(以上这些是不区分平台的核心代码)，接着是跨平台和服务端渲染(这些暂时不在讨论范围)及编译器。将这些属性方法都定义好了之后，最后会导出一个完整的构造函数给到用户使用，而new Vue就是启动的钥匙。
目录结构
|-- dist 打包后的vue版本
|-- flow 类型检测，3.0换了typeScript
|-- script 构建不同版本vue的相关配置
|-- src 源码
|-- compiler 编译器
|-- core 不区分平台的核心代码
|-- components 通用的抽象组件
|-- global-api 全局API
|-- instance 实例的构造函数和原型方法
|-- observer 数据响应式
|-- util 常用的工具方法
|-- vdom 虚拟dom相关
|-- platforms 不同平台不同实现
|-- server 服务端渲染
|-- sfc .vue单文件组件解析
|-- shared 全局通用工具方法
|-- test 测试
- flow：javaScript是弱类型语言，使用flow以定义类型和检测类型，增加代码的健壮性。
- src/compiler：将template模板编译为render函数。
- src/core：与平台无关通用的逻辑，可以运行在任何javaScript环境下，如web、Node.js、weex嵌入原生应用中。
- src/platforms：针对web平台和weex平台分别的实现，并提供统一的API供调用。
- src/observer：vue检测数据数据变化改变视图的代码实现。
- src/vdom：将render函数转为vnode从而patch为真实dom以及diff算法的代码实现。
- dist：存放着针对不同使用方式的不同的vue版本。
Vue 构建版本
vue使用的是rollup构建的，按照使用方式的不同，可以分为以下三类：
- UMD：通过 <script> 标签直接在浏览器中使用
- CommonJS：Node 的模块方式
- ES Module：ES6的模块导入方式
在vue的内部是只认render函数的，我们来自己定义一个render函数
new Vue({
data: {
msg: 'hello Vue!'
},
render(h) {
return h('span', this.msg);
}
}).$mount('#app');
可能有人会纳闷了，既然只认render函数，同时我们开发好像从来并没有写过render函数，而是使用的template模板。这是因为有vue-loader，它会将我们在template内定义的内容编译为render函数，而这个编译就是区分完整版和运行时版本的关键所在，完整版就自带这个编译器，而运行时版本就没有，如下面这段代码如果是在运行时版本环境下就会报错了：
new Vue({
data: {
msg: 'hello Vue!'
},
template: `<div>{{msg}}</div>`
})
vue-cli默认是使用运行时版本的，更改或覆盖脚手架内的默认配置，将其更改为完整版即可通过编译：'vue$': 'vue/dist/vue.esm.js'，推荐还是使用运行时版本
这里涉及到一个常被问到的面试题：
请问 runtime compiler 和 runtime-only 这两个版本的区别？
- 文件大小的区别，带编译的版本要比不带的版本文件要大6kb左右
- 编译时机不同：编译运行时版本会在运行时进行编译，性能会有一定损耗；运行时版本借助于 vue-loader 做的离线编译，运行速度更快。
网友评论