- A+
所属分类：Web前端
前言
前面我们简单的了解了 vue 初始化时的一些大概的流程，这里我们详细的了解下具体的内容;
这块建议搭建可以根据 demo 进行 debugger 来观察；
内容
这一块主要围绕init.ts中的mergeOptions进行剖析。
mergeOptions
mergeOptions的方法位于scr/core/util/options.ts中,除了resolveAsset未被调用外，其他都在这一层级会被调用；
/** * Option overwriting strategies are functions that handle * how to merge a parent option value and a child option * value into the final value. * 选项合并策略 处理合并parent选项值和child选项值并转为最终的值 */ const strats = config.optionMergeStrategies /** * Options with restrictions * */ if (__DEV__) { strats.el = strats.propsData = function ( parent: any, child: any, vm: any, key: any ) { if (!vm) { warn( `option "${key}" can only be used during instance ` + 'creation with the `new` keyword.' ) } return defaultStrat(parent, child) } } /** * Helper that recursively merges two data objects together. * * 合并data选项 * */ function mergeData( to: Record<string | symbol, any>, from: Record<string | symbol, any> | null, recursive = true ): Record<PropertyKey, any> { if (!from) return to let key, toVal, fromVal const keys = hasSymbol ? (Reflect.ownKeys(from) as string[]) : Object.keys(from) for (let i = 0; i < keys.length; i++) { key = keys[i] // in case the object is already observed... // 跳过已经存在响应式的对象 if (key === '__ob__') continue toVal = to[key] fromVal = from[key] if (!recursive || !hasOwn(to, key)) { // 对数据进行响应式处理 set(to, key, fromVal) } else if ( toVal !== fromVal && isPlainObject(toVal) && isPlainObject(fromVal) ) { // 如果parent和child都有值却不相等而且两个都是对象的时候,继续递归合并 mergeData(toVal, fromVal) } } return to } /** * Data * * 合并作为函数的data */ export function mergeDataOrFn( parentVal: any, childVal: any, vm?: Component ): Function | null { // 判断是否存在vue实例 if (!vm) { // in a Vue.extend merge, both should be functions // 在Vue.extend的合并中,两个参数都应该是函数 if (!childVal) { return parentVal } if (!parentVal) { return childVal } // when parentVal & childVal are both present, // 当parentVal和childVal都存在的时候 // 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 // 不需要去检查parentVal是否是一个函数因为 // it has to be a function to pass previous merges. // 他肯定是先前合并的函数 return function mergedDataFn() { // 合并data数据 return mergeData( isFunction(childVal) ? childVal.call(this, this) : childVal, isFunction(parentVal) ? parentVal.call(this, this) : parentVal ) } } else { // 合并实例data函数 return function mergedInstanceDataFn() { // instance merge // child 数据 const instanceData = isFunction(childVal) ? childVal.call(vm, vm) : childVal // 默认数据 const defaultData = isFunction(parentVal) ? parentVal.call(vm, vm) : parentVal // 如果child存在数据则进行合并否则直接返回默认数据 if (instanceData) { return mergeData(instanceData, defaultData) } else { return defaultData } } } } strats.data = function ( parentVal: any, childVal: any, vm?: Component ): Function | null { if (!vm) { // dev环境下会判断child是否为函数,不是的话则发出警告并返回parentVal if (childVal && typeof childVal !== 'function') { __DEV__ && warn( 'The "data" option should be a function ' + 'that returns a per-instance value in component ' + 'definitions.', vm ) return parentVal } return mergeDataOrFn(parentVal, childVal) } return mergeDataOrFn(parentVal, childVal, vm) } /** * Hooks and props are merged as arrays. * * 生命周期合并策略会将生命周期内的钩子函数和props转化为数组格式并合并到一个数组中 */ export function mergeLifecycleHook( parentVal: Array<Function> | null, childVal: Function | Array<Function> | null ): Array<Function> | null { const res = childVal ? parentVal ? parentVal.concat(childVal) : isArray(childVal) ? childVal : [childVal] : parentVal return res ? dedupeHooks(res) : res } function dedupeHooks(hooks: any) { const res: Array<any> = [] for (let i = 0; i < hooks.length; i++) { if (res.indexOf(hooks[i]) === -1) { res.push(hooks[i]) } } return res } LIFECYCLE_HOOKS.forEach(hook => { strats[hook] = mergeLifecycleHook }) /** * Assets * * When a vm is present (instance creation), we need to do * a three-way merge between constructor options, instance * options and parent options. * 当存在vm(实例创建)时,我们需要在构造函数选项、实例和父选之间进行三方合并 * */ function mergeAssets( parentVal: Object | null, childVal: Object | null, vm: Component | null, key: string ): Object { const res = Object.create(parentVal || null) if (childVal) { __DEV__ && assertObjectType(key, childVal, vm) // 将child合并到parentVal中会进行覆盖 return extend(res, childVal) } else { return res } } ASSET_TYPES.forEach(function (type) { strats[type + 's'] = mergeAssets }) /** * Watchers. * * Watchers hashes should not overwrite one * another, so we merge them as arrays. *监听不应该被覆盖，所以使用数组格式进行合并 * * watch合并 */ strats.watch = function ( parentVal: Record<string, any> | null, childVal: Record<string, any> | null, vm: Component | null, key: string ): Object | null { // work around Firefox's Object.prototype.watch... // nativeWatch 兼容火狐浏览器，因为火狐浏览器原型上存在watch //@ts-expect-error work around if (parentVal === nativeWatch) parentVal = undefined //@ts-expect-error work around if (childVal === nativeWatch) childVal = undefined /* istanbul ignore if */ if (!childVal) return Object.create(parentVal || null) if (__DEV__) { assertObjectType(key, childVal, vm) } if (!parentVal) return childVal const ret: Record<string, any> = {} extend(ret, parentVal) for (const key in childVal) { let parent = ret[key] const child = childVal[key] if (parent && !isArray(parent)) { parent = [parent] } ret[key] = parent ? parent.concat(child) : isArray(child) ? child : [child] } return ret } /** * Other object hashes. * * 对象合并，存在childVal的话以childVal为准 */ strats.props = strats.methods = strats.inject = strats.computed = function ( parentVal: Object | null, childVal: Object | null, vm: Component | null, key: string ): Object | null { if (childVal && __DEV__) { assertObjectType(key, childVal, vm) } if (!parentVal) return childVal const ret = Object.create(null) extend(ret, parentVal) if (childVal) extend(ret, childVal) return ret } /** * provide合并 */ strats.provide = function (parentVal: Object | null, childVal: Object | null) { if (!parentVal) return childVal return function () { const ret = Object.create(null) mergeData(ret, isFunction(parentVal) ? parentVal.call(this) : parentVal) if (childVal) { // 不进行递归合并 mergeData( ret, isFunction(childVal) ? childVal.call(this) : childVal, false // non-recursive ) } return ret } } /** * Default strategy. * 默认值策略 | 避免parentVal被未定义的childVal覆盖 */ const defaultStrat = function (parentVal: any, childVal: any): any { return childVal === undefined ? parentVal : childVal } /** * Validate component names * 校验组件名是否合法 | 避免组件名称使用保留的关键字或者不符合html5规范 */ function checkComponents(options: Record<string, any>) { for (const key in options.components) { validateComponentName(key) } } export function validateComponentName(name: string) { if ( !new RegExp(`^[a-zA-Z][\-\.0-9_${unicodeRegExp.source}]*$`).test(name) ) { warn( 'Invalid component name: "' + name + '". Component names ' + 'should conform to valid custom element name in html5 specification.' ) } if (isBuiltInTag(name) || config.isReservedTag(name)) { warn( 'Do not use built-in or reserved HTML elements as component ' + 'id: ' + name ) } } /** * Ensure all props option syntax are normalized into the * Object-based format. * * 格式化object对象 | 确保所有的props选项的语法都符合对象格式 */ function normalizeProps(options: Record<string, any>, vm?: Component | null) { const props = options.props // 不存在props则直接return if (!props) return const res: Record<string, any> = {} let i, val, name // 判断是否是数组 if (isArray(props)) { i = props.length while (i--) { val = props[i] if (typeof val === 'string') { // 使用驼峰来代替-连字符 name = camelize(val) res[name] = { type: null } } else if (__DEV__) { // 如果是dev环境则发出警告，提示在数组语法下props必须为字符串 warn('props must be strings when using array syntax.') } } } else if (isPlainObject(props)) { // 判断是否为对象 for (const key in props) { val = props[key] // 使用驼峰来代替-连字符 name = camelize(key) res[name] = isPlainObject(val) ? val : { type: val } } } else if (__DEV__) { // 如果是dev环境则发出警告，提示props应该是一个数组或者对象 warn( `Invalid value for option "props": expected an Array or an Object, ` + `but got ${toRawType(props)}.`, vm ) } options.props = res } /** * Normalize all injections into Object-based format * * 将所有的inject格式化object对象 */ function normalizeInject(options: Record<string, any>, vm?: Component | null) { const inject = options.inject if (!inject) return const normalized: Record<string, any> = (options.inject = {}) if (isArray(inject)) { for (let i = 0; i < inject.length; i++) { normalized[inject[i]] = { from: inject[i] } } } else if (isPlainObject(inject)) { for (const key in inject) { const val = inject[key] normalized[key] = isPlainObject(val) ? extend({ from: key }, val) : { from: val } } } else if (__DEV__) { // 开发环境下如果inject格式不是数组或者对象则发出警告 warn( `Invalid value for option "inject": expected an Array or an Object, ` + `but got ${toRawType(inject)}.`, vm ) } } /** * Normalize raw function directives into object format. * *将原始的指令函数转为object对象格式 */ function normalizeDirectives(options: Record<string, any>) { const dirs = options.directives if (dirs) { for (const key in dirs) { const def = dirs[key] if (isFunction(def)) { dirs[key] = { bind: def, update: def } } } } } // 开发环境下，会进行检测，如果不是对象的话发出警告 function assertObjectType(name: string, value: any, vm: Component | null) { if (!isPlainObject(value)) { warn( `Invalid value for option "${name}": expected an Object, ` + `but got ${toRawType(value)}.`, vm ) } } /** * Merge two option objects into a new one. * Core utility used in both instantiation and inheritance. * * 将两个option对象合并成一个新的对象 * 用于实例化和继承的核心工具 */ export function mergeOptions( parent: Record<string, any>, child: Record<string, any>, vm?: Component | null ): ComponentOptions { // dev环境下会检查组件名称是否合法 if (__DEV__) { checkComponents(child) } // 检查option是否是函数,是的话直接将options赋值给child if (isFunction(child)) { // @ts-expect-error child = child.options } // 格式化props为object对象 | 检测格式是否为数组和对象，并使用驼峰代替-连字符，开发环境下如果格式存在问题会发出警告 normalizeProps(child, vm) // 格式化inject为object对象 | 检测格式是否为数组和对象，开发环境下如果格式存在问题会发出警告 normalizeInject(child, vm) // 格式化directive为object对象 normalizeDirectives(child) // Apply extends and mixins on the child options, // 在子选项上去应用 extends和mixins // but only if it is a raw options object that isn't // the result of another mergeOptions call. // 前提是它是一个原始选项对象,而不是另一个mergeOptions的结果 // Only merged options has the _base property. // 只合并具有_base属性的合并选项 if (!child._base) { // 合并extends到parent if (child.extends) { parent = mergeOptions(parent, child.extends, vm) } // 合并mixins到parent if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) } } } const options: ComponentOptions = {} as any let key for (key in parent) { mergeField(key) } for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) } } // 合并parent和child选项 function mergeField(key: any) { 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: Record<string, any>, 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 (__DEV__ && warnMissing && !res) { warn('Failed to resolve ' + type.slice(0, -1) + ': ' + id) } return res } 
