多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] ![](https://box.kancloud.cn/b5e954494ac7d1e62f74a9594b51d9a3_1066x221.png) ## 框架搭建 ![](https://box.kancloud.cn/b014bedbd634178eefb011edf618b6cb_1087x636.png) ![](https://box.kancloud.cn/ce9b39f5c697cb844f472ffb3978e792_904x499.png) ![](https://box.kancloud.cn/7600432f9c88041dd2952b864c2c7f4c_554x33.png) ## 组件系统 ``` javascript // 组件系统 Ctor === Vue 子类 Ctor.super function resolveConstructorOptions (Ctor) { var options = Ctor.options; if (Ctor.super) { var superOptions = resolveConstructorOptions(Ctor.super); var cachedSuperOptions = Ctor.superOptions; if (superOptions !== cachedSuperOptions) { // super option changed, // need to resolve new options. Ctor.superOptions = superOptions; // check if there are any late-modified/attached options (#4976) var modifiedOptions = resolveModifiedOptions(Ctor); // update base extend options if (modifiedOptions) { extend(Ctor.extendOptions, modifiedOptions); } options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions); if (options.name) { options.components[options.name] = Ctor; } } } return options } ``` ## Vue.options ![](https://box.kancloud.cn/59975576410cfb26a162b87796b60e45_578x153.png) ``` //Vue.options.components //Vue.component var ASSET_TYPES = [ 'component', 'directive', 'filter' ]; Vue.options = Object.create(null); ASSET_TYPES.forEach(function (type) { Vue.options[type + 's'] = Object.create(null); }); ``` ``` /** * Validate component names */ function checkComponents (options) { for (var key in options.components) { validateComponentName(key); } } ``` ## mergeOptions ``` /** * Merge two option objects into a new one. * Core utility used in both instantiation and inheritance. */ function mergeOptions (parent,child,vm) { // 值的规范检测 Components Props Directives // 策略处理 el data 生命周期的钩子函数…… // 自定义策略(strats对象) 默认策略 { checkComponents(child); } if (typeof child === 'function') { child = child.options; } normalizeProps(child, vm); normalizeInject(child, vm); 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. if (!child._base) { if (child.extends) { parent = mergeOptions(parent, child.extends, vm); } if (child.mixins) { for (var i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm); } } } var options = {}; var key; //------------------------------------- for (key in parent) { mergeField(key); } // 检测父对象有没有这个属性,没有才会调用mergeField for (key in child) { if (!hasOwn(parent, key)) { mergeField(key); } } // 选项的策略处理 function mergeField (key) { var strat = strats[key] || defaultStrat; options[key] = strat(parent[key], child[key], vm, key); } return options } ``` ### 所有“选项”的默认策略 ``` /** * Default strategy. */ var defaultStrat = function (parentVal, childVal) { return childVal === undefined ? parentVal : childVal }; ```