vue2源码解析之全局API实例详解

/*
作用:
使用基础vue构造器，创建一个子类，参数是一个包含组件选项的对象
`data` 选项是特例，需要注意 - 在 `Vue.extend()` 中它必须是函数
*/
Vue.extend(options)
// eg:
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
// 结果：
<p>Walter White aka Heisenberg</p>

// 源码位置 src/core/global-api/extend.js
Vue.extend = function (extendOptions: Object): Function {
// 初始化参数
extendOptions = extendOptions || {}
// 存储父类
const Super = this
// 存储父类的唯一标识
const SuperId = Super.cid
// 获取到参数中的缓存数据
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
// 如果已经缓存过就会缓存中获取返回
if (cachedCtors[SuperId]) {
return cachedCtors[SuperId]
}
// 获取到name
const name = extendOptions.name || Super.options.name
if (process.env.NODE_ENV !== 'production' && name) {
validateComponentName(name)
}
// 创建一个子类
const Sub = function VueComponent (options) {
this._init(options)
}
// 原型继承
Sub.prototype = Object.create(Super.prototype)
// 修改构造器
Sub.prototype.constructor = Sub
// 子类的唯一标识
Sub.cid = cid++
// 合并父类和传递进来的参数
Sub.options = mergeOptions(
Super.options,
extendOptions
)
// 子类中存储父类
Sub['super'] = Super
// 如果子类中有props 进行初始化
if (Sub.options.props) {
initProps(Sub)
}
// 如果子类中有计算属性，进行初始化
if (Sub.options.computed) {
initComputed(Sub)
}
// 把父类的extend，mixin，use放在子类上
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
// 把指定的属性全部从父类上拷贝到子类上
ASSET_TYPES.forEach(function (type) {
Sub[type] = Super[type]
})
if (name) {
Sub.options.components[name] = Sub
}
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)
// cache constructor
// 缓存子类
cachedCtors[SuperId] = Sub
return Sub
}
}
// 把子类中的props存储到原型上
function initProps (Comp) {
const props = Comp.options.props
for (const key in props) {
proxy(Comp.prototype, `_props`, key)
}
}
// 把子类中的计算属性存储到原型上
function initComputed (Comp) {
const computed = Comp.options.computed
for (const key in computed) {
defineComputed(Comp.prototype, key, computed[key])
}
}

// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

// 注册
Vue.filter('my-filter',function(){})
// 获取
Vue.filter('my-filter')

// 注册 传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({}))
// 注册 传入一个选项对象
Vue.component('my-component', {})
// 获取
Vue.component('my-component')

// 源码位置 src/core/global-api/
export const ASSET_TYPES = [
'component',
'directive',
'filter'
]
export function initAssetRegisters (Vue: GlobalAPI) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(type => {
Vue[type] = function (
id: string,
definition: Function | Object
): Function | Object | void {
// 不存在definition 表示获取，直接从options下的相应的typs+'s'进行获取
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && type === 'component') {
validateComponentName(id)
}
// 如果是组件 并且definition为一个{}对象，那么就通过extend继承vue
if (type === 'component' && isPlainObject(definition)) {
// 没有name就使用id
definition.name = definition.name || id
// 使definition继承vue
definition = this.options._base.extend(definition)
}
// 如果是指令并且definition是一个函数，那么就把这个函数作为bind和update
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition }
}
// 设置值 保存到对应的key下
this.options[type + 's'][id] = definition
return definition
}
}
})
}

export const ASSET_TYPES = [
'component',
'directive',
'filter'
]
ASSET_TYPES.forEach(type => {
Vue[type] = function (
id: string,
definition: Function | Object
){}
})

if (!definition) {
return this.options[type + 's'][id]
}

// 如果是组件
if (type === 'component' && isPlainObject(definition)) {
// 没有name就使用id
definition.name = definition.name || id
// 使definition继承vue
definition = this.options._base.extend(definition)
}

// 如果是指令
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition }
}

// 设置值
this.options[type + 's'][id] = definition
return definition

/*
作用：
安装 Vue.js 插件。如果插件是一个对象，必须提供 `install` 方法。
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 `new Vue()` 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次
plugin：-   `{Object | Function} plugin`
*/
Vue.use( plugin )

// 源码位置 src/core/global-api/use.js
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
// 初始_installedPlugins变量
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 如果已经存在直接返回
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 获取剩余的参数转成数组
const args = toArray(arguments, 1)
// 把this添加进去
args.unshift(this)
// 如果install是一个函数 直接执行
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') { // 如果插件是一个函数，直接执行
plugin.apply(null, args)
}
// 添加到数组中
installedPlugins.push(plugin)
return this
}
}

// 初始_installedPlugins变量
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 如果已经存在直接返回
if (installedPlugins.indexOf(plugin) > -1) {
return this
}

// 获取剩余的参数转成数组
const args = toArray(arguments, 1)
// 把this添加进去
args.unshift(this)

// 如果install是一个函数 直接执行
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
}

else if (typeof plugin === 'function') { // 如果插件是一个函数，直接执行
plugin.apply(null, args)
}

// 添加到数组中
installedPlugins.push(plugin)
return this

/*
作用：
全局注册一个混入，影响注册之后所有创建的每个vue实例，插件作者可以使用混入，
向组件注入自定义的行为。**不推荐在应用代码中使用**。
*/
Vue.mixin()

// 源码位置 src/core/global-api/mixin.js
export function initMixin (Vue: GlobalAPI) {
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin)
return this
}
}

export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {
if (process.env.NODE_ENV !== 'production') {
checkComponents(child)
}
if (typeof child === 'function') {
child = child.options
}
// 设置props,把带有-的属性名改成驼峰，存到一个新的对象中进行返回
normalizeProps(child, vm)
// 设置注入的属性 把inject中的数据都转成 {from:val}形式的对象返回
normalizeInject(child, vm)
// 设置指令 返回指令的值为{ bind: def, update: def }的形式
normalizeDirectives(child)
// Apply extends and mixins on the child options,
// but only if it is a raw options object that isn't
// the result of another mergeOptions call.
// Only merged options has the _base property.
// 递归处理extends和mixins
if (!child._base) {
if (child.extends) {
parent = mergeOptions(parent, child.extends, vm)
}
if (child.mixins) {
for (let i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm)
}
}
}
// 创建一个新的对象
const options = {}
let key
for (key in parent) { // 遍历父级进行设置属性
mergeField(key)
}
for (key in child) { // 遍历子级进行设置属性
if (!hasOwn(parent, key)) { // 父级不存在此属性就进行设置
mergeField(key)
}
}
// 通过策略模式给不同的属性设置对应的执行函数，
function mergeField (key) {
// 获取到不同属性的函数
const strat = strats[key] || defaultStrat
// 执行对应的函数重新设置属性
options[key] = strat(parent[key], child[key], vm, key)
}
return options
}

/*
作用: 将一个模板字符串编译成 render 函数。**只在完整版时可用**。
template: 字符串模板
*/
Vue.compile(template)

Vue.compile = compileToFunctions

/*
作用:
让一个对象可响应，Vue内部会用它来处理data函数返回的对象
返回的对象可以直接用于[渲染函数]和[计算属性]内，并且会在发生变更时触发相应的更新。
也可以作为最小化的跨组件状态存储器，用于简单的场景：
*/
const state = Vue.observable({ count: 0 })
const Demo = {
render(h) {
return h('button', {
on: { click: () => { state.count++ }}
}, `count is: ${state.count}`)
}
}

// 源码位置 src/core/global-api/
// 2.6 explicit observable API
Vue.observable = <T>(obj: T): T => {
observe(obj)
return obj
}