[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
};
```