源码版本:2.0.5
构造器、实例、选项
让我们用一段demo展示一下这三个概念:
//HTML
<div id="app">
{{ message }}
</div>
//JS
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
其中:
Vue: Vue的构造器
vm : 实例 (实例名可以任意取,这里我们便于理解保持和vue文档一致)
new Vue(options): 选项(options)即为传入构造器里的配置选项。(data, methods,computed,created...)
当我们了解这三个概念,将有助于我们去理解vue的api文档
Vue 的开放api
全局配置: 以 Vue.config.xx 的形式去访问和修改
全局API: 以Vue.xx 的形式去访问和修改
选项: 以 var vm = new Vue(options) 的形式将options传入构造器
实例属性/方法: 以vm.$xx的方式去访问 (前缀$,为了避免用户data/methods等解析后绑定的api 和 默认api冲突)
从api文档中我们可以了解到,当我们引入vue.js, 我们仅仅引入了一个构造函数(Vue)
引入了构造函数后,我们有几种使用方式
最常见的使用方式: var vm = new Vue(options)
将我们自定义的选项,传入构造器。 当new Vue(options)时,会自动运行vm._init方法
解析各种选项
调用beforeCreate 和created 上绑定的钩子函数
将数据项(data,computed,props)和methods等绑到实例上
调用vm.$mount方法,来执行模板渲染
返回一个实例对象 vm
实际上,我们使用vue.js来开发时,主要就是配置不同的options提供Vue构造器解析,实现不同的业务功能。
通过更改Vue.config来进行全局配置
在选项内部可以使用 Vue 和 vm 来调用构造器和实例上的方法
Vue源码是怎么开放这些api的
主入口
src/core/index.js
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
initGlobalAPI(Vue)
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
Vue.version = '__VERSION__'
export default Vue
Vue源码的主入口主要做三件事
1.引用 ./instance/index 中暴露的Vue构造器
2.调用initGlobalAPI方法,定义全局资源
3.暴露Vue
initGlobalAPI
src/core/global-api/index.js
//源码有点长,我去掉了引用部分和一些注释。
export function initGlobalAPI (Vue: GlobalAPI) {
// config
const configDef = {}
configDef.get = () => config
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => {
util.warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
Object.defineProperty(Vue, 'config', configDef)
Vue.util = util
Vue.set = set
Vue.delete = del
Vue.nextTick = util.nextTick
Vue.options = Object.create(null)
config._assetTypes.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue
util.extend(Vue.options.components, builtInComponents)
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)
}
initGlobal的代码就是对Vue进行各种方法和属性定义
【Vue.config】 各种全局配置项
【Vue.util】 各种工具函数,还有一些兼容性的标志位(哇,不用自己判断浏览器了,Vue已经判断好了)
【Vue.set/delete】 这个你文档应该见过
【Vue.nextTick】
【Vue.options】 这个options和我们上面用来构造实例的options不一样。这个是Vue默认提供的资源(组件指令过滤器)。
【Vue.use】 通过initUse方法定义
【Vue.mixin】 通过initMixin方法定义
【Vue.extend】通过initExtend方法定义
这些定义的全局api可好玩了,平常我们多是用实例上的方法。其实构造器上也绑了不少好用的方法。
有兴趣的同学,可以用下方代码去探究一下
在你的vue项目里,谷歌命令行键入
Object.getOwnPropertyNames(Vue) //可以看定义在对象上的所有属性名/方法名
Vue.config
Vue.util
Vue.set.toString() //我们平常在控制台上是看不了一个函数到底源码怎么样的,用toString()就可以啦
Vue构造器的定义
src/core/instance/index.js
//构造函数,当new Vue(options) 会自动执行这个函数
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
这里就不一个一个函数展开了
构造函数里其实就一句话,this._init(options)
initMixin之类的方法,定义了实例上的方法,下面给出一个探索地图,以供探究源码
我们可以看到 以 "_"为开头的方法,多半是Vue内部使用,但不公开的api。
以“$” 为开头的方法,是文档中公开给用户使用的默认api
至此,我们对Vue的结构有了个初步的了解,以及相关api的原始出处有了初步了解。
在学习的过程中,参考了两位大牛的文章,收益良多
囧克斯 Vue.js源码学习笔记
王鹤 Vue.js 2.0源码解析之前端渲染篇
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。