VueJS学习之旅 08

下面我就来看看VueJS中主要的组件选项，以及它们在Vue实例对象初始化过程中是如何完成属性合并的。

---

选项options / 生命周期钩子

首先，我们要看看VueJS默认都提供了哪些生命周期钩子。
前面我们曾经学习过VueJS初始化Global Config的相关过程，涉及到一个文件 'src/core/config.js'，其中给定了一些默认的配置选项。
我们打开这个文件，找到 _lifecycleHooks 的具体配置。

/**
  * List of lifecycle hooks.
  */
_lifecycleHooks: [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated'
],

这些就是默认给出的生命周期钩子的声明，Vue实例对象在整个存活过程中，会根据当前所处的状态，来触发这些钩子。
有了这些钩子，我们就可以以切面的方式，在不同的时间节点上进行一些其他操作。而且实现方式非常简单，就是在初始化Vue实例对象时，给定具体钩子对应的回调即可。

这样，接下来我们就有必要看看具体这些钩子的回调时如何被调用的。
在之前我们学习 VueJS 实例方法的源码时，经常会看到代码之中会调用 callHook(vm, hook) 这样的语句，很明显这就是在调用相关的生命周期钩子的回调函数。
来看看这个 callhook 函数的实现细节：

// src/core/instance/lifecycle.js

export function callHook (vm: Component, hook: string) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      handlers[i].call(vm)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
}

1. 函数接收两个参数，第一个是Vue实例对象，第二个是hook的名字
2. 根据 hook 在 vm.$options 中找到相应的回调handlers。（为何有多个handlers，可以参看'src/core/util/options.js'文件中mergeHook相关逻辑）
3. 依次调用 handler.call(vm)，这样就使得所有的生命周期钩子自动绑定 this 上下文到实例中
4. vue实例根据条件调用 vm.$emit 触发'hook:xxxx'事件

可以前往 这里 查看生命周期示例。

• beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated

那这些选项是如何初始化的呢。
我们之前提到过，VueJS预定义了一些属性合并策略供内部使用。其中有一项就是针对生命周期钩子的，我们具体来看一下。
打开 'src/core/util/options.js' 文件，找到以下代码

/**
 * Hooks and param attributes are merged as arrays.
 */
function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}
config._lifecycleHooks.forEach(hook => {
  strats[hook] = mergeHook
})

由代码可见，针对所有的生命周期钩子，都使用同一个属性合并策略。

1. 子实例不存在，直接返回父实例
2. 子实例存在，父实例不存在，返回子实例（子实例不是数组则包装为数组）
3. 父子实例都存在，合并两个实例

选项options / 资源

接下来，我们看看VueJS默认都提供了资源类型的选项。
前面我们曾经学习过VueJS初始化Global Config的相关过程，涉及到一个文件 'src/core/config.js'，其中给定了一些默认的配置选项。
我们打开这个文件，找到 _assetTypes 的具体配置。

/**
   * List of asset types that a component can own.
   */
  _assetTypes: [
    'component',
    'directive',
    'filter'
  ],

以上这些就是对应官方API中与资源相关的选项。

• components, directives, filters

这些选项的初始化可以参考以下代码：

/**
 * Assets
 *
 * When a vm is present (instance creation), we need to do
 * a three-way merge between constructor options, instance
 * options and parent options.
 */
function mergeAssets (parentVal: ?Object, childVal: ?Object): Object {
  const res = Object.create(parentVal || null)
  return childVal
    ? extend(res, childVal)
    : res
}

config._assetTypes.forEach(function (type) {
  strats[type + 's'] = mergeAssets
})

由代码可见，针对上面3种资源选项，都使用同一个属性合并策略。

1. 代码逻辑相对简单，详见上面的注释

选项options / 其它

对于其它一些属性，代码相对分散。这里，我们根据预定义的属性合并策略，来依次了解一下。

• el, propsData

/**
 * Options with restrictions
 */
if (process.env.NODE_ENV !== 'production') {
  strats.el = strats.propsData = function (parent, child, vm, key) {
    if (!vm) {
      warn(
        `option "${key}" can only be used during instance ` +
        'creation with the `new` keyword.'
      )
    }
    return defaultStrat(parent, child)
  }
}
...
/**
 * Default strategy.
 */
const defaultStrat = function (parentVal: any, childVal: any): any {
  return childVal === undefined
    ? parentVal
    : childVal
}

对于这两个选项的合并，使用默认的合并策略。（在非生产环境，若 vm 实例不存在，给出警告信息）

• watch

/**
 * Watchers.
 *
 * Watchers hashes should not overwrite one
 * another, so we merge them as arrays.
 */
strats.watch = function (parentVal: ?Object, childVal: ?Object): ?Object {
  /* istanbul ignore if */
  if (!childVal) return parentVal
  if (!parentVal) return childVal
  const ret = {}
  extend(ret, parentVal)
  for (const key in childVal) {
    let parent = ret[key]
    const child = childVal[key]
    if (parent && !Array.isArray(parent)) {
      parent = [parent]
    }
    ret[key] = parent
      ? parent.concat(child)
      : [child]
  }
  return ret
}

• props, methods, computed

/**
 * Other object hashes.
 */
strats.props =
strats.methods =
strats.computed = function (parentVal: ?Object, childVal: ?Object): ?Object {
   if (!childVal) return parentVal
   if (!parentVal) return childVal
   const ret = Object.create(null)
   extend(ret, parentVal)
   extend(ret, childVal)
   return ret
}

• data

/**
 * Data
 */
strats.data = function (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (typeof childVal !== 'function') {
      process.env.NODE_ENV !== 'production' && warn(
        'The "data" option should be a function ' +
        'that returns a per-instance value in component ' +
        'definitions.',
        vm
      )
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // we need to return a function that returns the
    // merged result of both functions... no need to
    // check if parentVal is a function here because
    // it has to be a function to pass previous merges.
    return function mergedDataFn () {
      return mergeData(
        childVal.call(this),
        parentVal.call(this)
      )
    }
  } else if (parentVal || childVal) {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm)
        : undefined
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

1. 从上面的代码可以看出，针对于data这个选项的合并策略，返回的是一个具体的合并属性的函数。
2. 为何要返回一个函数，我没看看官方的解释。

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。