• 1.2 构造器的默认选项

    1.2 构造器的默认选项

    我们回到最开始的例子,在实例化Vue时,我们会将选项对象传递给构造器进行初始化,这个选项对象描述了你想要的行为,例如以data定义实例中的响应式数据,以computed描述实例中的计算属性,以components来进行组件注册,甚至是定义各个阶段执行的生命周期钩子等。然而Vue内部本身会自带一些默认的选项,这些选项和用户自定义的选项会在后续一起参与到Vue实例的初始化中。

    initGlobalAPI方法中有几行默认选项的定义。Vue内部的默认选项会保留在静态的options属性上,从源码看Vue自身有四个默认配置选项,分别是component,directive, filter以及返回自身构造器的_base

    1. var ASSET_TYPES = [
    2. 'component',
    3. 'directive',
    4. 'filter'
    5. ];
    6. // 原型上创建了一个指向为空对象的options属性
    7. Vue.options = Object.create(null);
    8. ASSET_TYPES.forEach(function (type) {
    9. Vue.options[type + 's'] = Object.create(null);
    10. });
    11. Vue.options._base = Vue;

    很明显我们开发者对这几个选项是非常熟悉的,components是需要注册的组件选项,directives是需要注册的指令,而filter则代表需要注册的过滤器。从代码的实现细节看,Vuecomponents提供了keepAlive,transition,transitionGroup的内置组件,为directives提供了v-model,v-show的内置指令,而过滤器则没有默认值。

    1. // Vue内置组件
    2. var builtInComponents = {
    3. KeepAlive: KeepAlive
    4. };
    5. var platformComponents = {
    6. Transition: Transition,
    7. TransitionGroup: TransitionGroup
    8. };
    9. // Vue 内置指令,例如: v-model, v-show
    10. var platformDirectives = {
    11. model: directive,
    12. show: show
    13. }
    14. extend(Vue.options.components, builtInComponents);
    15. extend(Vue.options.components, platformComponents); // 扩展内置组件
    16. extend(Vue.options.directives, platformDirectives); // 扩展内置指令

    其中extend方法实现了对象的合并,如果属性相同,则用新的属性值覆盖旧值。

    1. // 将_from对象合并到to对象,属性相同时,则覆盖to对象的属性
    2. function extend (to, _from) {
    3. for (var key in _from) {
    4. to[key] = _from[key];
    5. }
    6. return to
    7. }

    因此做为构造器而言,Vue默认的资源选项配置如下:

    1. Vue.options = {
    2. components: {
    3. KeepAlive: {}
    4. Transition: {}
    5. TransitionGroup: {}
    6. },
    7. directives: {
    8. model: {inserted: ƒ, componentUpdated: ƒ}
    9. show: {bind: ƒ, update: ƒ, unbind: ƒ}
    10. },
    11. filters: {}
    12. _base
    13. }