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. }