- 1.2 构造器的默认选项
1.2 构造器的默认选项
我们回到最开始的例子,在实例化Vue
时,我们会将选项对象传递给构造器进行初始化,这个选项对象描述了你想要的行为,例如以data
定义实例中的响应式数据,以computed
描述实例中的计算属性,以components
来进行组件注册,甚至是定义各个阶段执行的生命周期钩子等。然而Vue
内部本身会自带一些默认的选项,这些选项和用户自定义的选项会在后续一起参与到Vue
实例的初始化中。
在initGlobalAPI
方法中有几行默认选项的定义。Vue
内部的默认选项会保留在静态的options
属性上,从源码看Vue
自身有四个默认配置选项,分别是component,directive, filter
以及返回自身构造器的_base
。
var ASSET_TYPES = [
'component',
'directive',
'filter'
];
// 原型上创建了一个指向为空对象的options属性
Vue.options = Object.create(null);
ASSET_TYPES.forEach(function (type) {
Vue.options[type + 's'] = Object.create(null);
});
Vue.options._base = Vue;
很明显我们开发者对这几个选项是非常熟悉的,components
是需要注册的组件选项,directives
是需要注册的指令,而filter
则代表需要注册的过滤器。从代码的实现细节看,Vue
为components
提供了keepAlive,transition,transitionGroup
的内置组件,为directives
提供了v-model,v-show
的内置指令,而过滤器则没有默认值。
// Vue内置组件
var builtInComponents = {
KeepAlive: KeepAlive
};
var platformComponents = {
Transition: Transition,
TransitionGroup: TransitionGroup
};
// Vue 内置指令,例如: v-model, v-show
var platformDirectives = {
model: directive,
show: show
}
extend(Vue.options.components, builtInComponents);
extend(Vue.options.components, platformComponents); // 扩展内置组件
extend(Vue.options.directives, platformDirectives); // 扩展内置指令
其中extend
方法实现了对象的合并,如果属性相同,则用新的属性值覆盖旧值。
// 将_from对象合并到to对象,属性相同时,则覆盖to对象的属性
function extend (to, _from) {
for (var key in _from) {
to[key] = _from[key];
}
return to
}
因此做为构造器而言,Vue
默认的资源选项配置如下:
Vue.options = {
components: {
KeepAlive: {}
Transition: {}
TransitionGroup: {}
},
directives: {
model: {inserted: ƒ, componentUpdated: ƒ}
show: {bind: ƒ, update: ƒ, unbind: ƒ}
},
filters: {}
_base
}