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 做的离线编译,运行速度更快。