/* @flow */ import Vue from '../instance/index'
import config from '../config'
import { warn } from './debug'
import { set } from '../observer/index'
import {
extend,
isPlainObject,
hasOwn,
camelize,
capitalize,
isBuiltInTag
} from 'shared/util' /**
* Option overwriting strategies are functions that handle
* how to merge a parent option value and a child option
* value into the final value.
覆盖策略是一个函数, 定义如何覆盖父级的对象
*/
const strats = config.optionMergeStrategies /**
* Options with restrictions
*/
if (process.env.NODE_ENV !== 'production') {
strats.el = strats.propsData = function (parent, child, vm, key) {
if (!vm) {
// key 这个配置只能在 new 一个实例的时候使用, 必须传入你创建的vm new Vue
warn(
`option "${key}" can only be used during instance ` +
'creation with the `new` keyword.'
)
}
//优先使用child的值
return defaultStrat(parent, child)
}
} /**
* Helper that recursively merges two data objects together.
一个小助手, 能递归合并两个数据对象在一起, 如果这个对象已经被监控, 会触发双向绑定
*/
function mergeData (to: Object, from: ?Object): Object {
//节省时间
if (!from) return to
let key, toVal, fromVal
const keys = Object.keys(from)
for (let i = 0; i < keys.length; i++) {
key = keys[i]
toVal = to[key]
fromVal = from[key]
if (!hasOwn(to, key)) { //这个方法是给to的属性key赋值,
// 如果to有__ob__属性, 还会把新合并的这个值设置成监控模式 , 并且即刻通知更新
// 会调用这两个方法 defineReactive(ob.value, key, val) ob.dep.notify()
set(to, key, fromVal)
} else if (isPlainObject(toVal) && isPlainObject(fromVal)) {
//如果val都是对象,继续合并
mergeData(toVal, fromVal)
}
}
return to
} /**
* Data
*/
strats.data = function (
parentVal: any,
childVal: any,
vm?: Component
): ?Function {
if (!vm) {
// in a Vue.extend merge, both should be functions
//节省时间
if (!childVal) {
return parentVal
} //childVal必须是函数
if (typeof childVal !== 'function') {
process.env.NODE_ENV !== 'production' && warn(
'The "data" option should be a function ' +
'that returns a per-instance value in component ' +
'definitions.',
vm
)
return parentVal
}
//节省时间
if (!parentVal) {
return childVal
}
// when parentVal & childVal are both present,
// we need to return a function that returns the
// merged result of both functions... no need to
// check if parentVal is a function here because
// it has to be a function to pass previous merges.
// 当父子都到位, 我们需要返回一个函数, 这个函数返回了两个合并的几个
// 不需要确认 parentval是个函数 因为它必须是传递给前一个合并的函数?
return function mergedDataFn () {
return mergeData(
childVal.call(this),
parentVal.call(this)
)
}
} else if (parentVal || childVal) {
return function mergedInstanceDataFn () {
// instance merge 合并
const instanceData = typeof childVal === 'function'
? childVal.call(vm)
: childVal
const defaultData = typeof parentVal === 'function'
? parentVal.call(vm)
: undefined
if (instanceData) {
return mergeData(instanceData, defaultData)
} else {
return defaultData
}
}
}
} /**
* Hooks and props are merged as arrays.
*/
function mergeHook (
parentVal: ?Array<Function>,
childVal: ?Function | ?Array<Function>
): ?Array<Function> {
//如果有child, 看看有没有parent, 如果有合并parent和 child, 如果没有, 返回child数组
return childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
} config._lifecycleHooks.forEach(hook => {
strats[hook] = mergeHook
}) /**
* Assets
*
* When a vm is present (instance creation), we need to do
* a three-way merge between constructor options, instance
* options and parent options. 合并构造函数Object的配置 和 实例的配置 和 父级的配置
*/
function mergeAssets (parentVal: ?Object, childVal: ?Object): Object {
const res = Object.create(parentVal || null)
return childVal
? extend(res, childVal)
: res
} config._assetTypes.forEach(function (type) {
strats[type + 's'] = mergeAssets
}) /**
* Watchers.
*
* Watchers hashes should not overwrite one
* another, so we merge them as arrays.
避免覆盖另一个, 这里把他们合并成数组
*/
strats.watch = function (parentVal: ?Object, childVal: ?Object): ?Object {
/* istanbul ignore if */
//节省时间
if (!childVal) return Object.create(parentVal || null)
if (!parentVal) return childVal
const ret = {} //复制父级
extend(ret, parentVal) //最终合并成数组形式
for (const key in childVal) {
let parent = ret[key]
const child = childVal[key]
if (parent && !Array.isArray(parent)) {
parent = [parent]
}
ret[key] = parent
? parent.concat(child)
: [child]
}
return ret
} /**
* Other object hashes.
简单的合并对象
*/
strats.props =
strats.methods =
strats.computed = function (parentVal: ?Object, childVal: ?Object): ?Object {
if (!childVal) return Object.create(parentVal || null)
if (!parentVal) return childVal
const ret = Object.create(null)
extend(ret, parentVal)
extend(ret, childVal)
return ret
} /**
* Default strategy. 选择其中一个作为默认
*/
const defaultStrat = function (parentVal: any, childVal: any): any {
return childVal === undefined
? parentVal
: childVal
} /**
* Validate component names
检测不能使用vue保留字
*/
function checkComponents (options: Object) {
for (const key in options.components) {
const lower = key.toLowerCase()
if (isBuiltInTag(lower) || config.isReservedTag(lower)) {
warn(
'Do not use built-in or reserved HTML elements as component ' +
'id: ' + key
)
}
}
} /**
* Ensure all props option syntax are normalized into the
* Object-based format.
确保所有的属性选项标签语法 都规范化, 都基于对象格式 , 如果key的val不存在 会设置一个默认的val => { type : null }
*/ function normalizeProps (options: Object) {
const props = options.props
if (!props) return
const res = {}
let i, val, name //[key1,key2]
if (Array.isArray(props)) {
i = props.length
while (i--) {
val = props[i]
if (typeof val === 'string') {
name = camelize(val)
res[name] = { type: null }
} else if (process.env.NODE_ENV !== 'production') {
warn('props must be strings when using array syntax.')
}
}
} else if (isPlainObject(props)) {
//{key1:val1, key2:val2}
for (const key in props) {
val = props[key]
name = camelize(key)
res[name] = isPlainObject(val)
? val
: { type: val }
}
}
options.props = res
} /**
* Normalize raw function directives into object format. 指令格式化 { direct1: fn1, direct2: fn2 } => { direct1: { bind: fn1, update, fn1 } ,...}
*/
function normalizeDirectives (options: Object) {
const dirs = options.directives
if (dirs) {
for (const key in dirs) {
const def = dirs[key]
if (typeof def === 'function') {
dirs[key] = { bind: def, update: def }
}
}
}
} /**
* Merge two option objects into a new one. 合并两个配置对象
* Core utility used in both instantiation and inheritance.
实例化和继承中使用的核心实用工具。
*/
export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {
if (process.env.NODE_ENV !== 'production') {
checkComponents(child)
}
normalizeProps(child)
normalizeDirectives(child)
const extendsFrom = child.extends
if (extendsFrom) {
parent = typeof extendsFrom === 'function'
? mergeOptions(parent, extendsFrom.options, vm)
: mergeOptions(parent, extendsFrom, vm)
}
if (child.mixins) {
for (let i = 0, l = child.mixins.length; i < l; i++) {
let mixin = child.mixins[i]
if (mixin.prototype instanceof Vue) {
mixin = mixin.options
}
parent = mergeOptions(parent, mixin, 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
} /**
* Resolve an asset.
* This function is used because child instances need access
* to assets defined in its ancestor chain.
*/
export function resolveAsset (
options: Object,
type: string,
id: string,
warnMissing?: boolean
): any {
/* istanbul ignore if */
if (typeof id !== 'string') {
return
}
const assets = options[type]
// check local registration variations first
if (hasOwn(assets, id)) return assets[id]
const camelizedId = camelize(id)
if (hasOwn(assets, camelizedId)) return assets[camelizedId]
const PascalCaseId = capitalize(camelizedId)
if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
// fallback to prototype chain
const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]
if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {
warn(
'Failed to resolve ' + type.slice(0, -1) + ': ' + id,
options
)
}
return res
}
各种合并配置项, 不知道为什么要这么多种方式