1.6 生命周期钩子选项自定义策略

我们知道掌握vue的生命周期钩子是使用vue高效开发组件的重点，这是vue官方的生命周期图

1.6 生命周期钩子选项自定义策略 - 图1

从源码中我们也可以看到vue中有多达12个钩子，而在选项合并的时候，生命周期钩子选项是遵循的以下的规则合并的。

  1. var LIFECYCLE_HOOKS = [
  2.   'beforeCreate',
  3.   'created',
  4.   'beforeMount',
  5.   'mounted',
  6.   'beforeUpdate',
  7.   'updated',
  8.   'beforeDestroy',
  9.   'destroyed',
  10.   'activated',
  11.   'deactivated',
  12.   'errorCaptured',
  13.   'serverPrefetch'
  14. ];
  15. LIFECYCLE_HOOKS.forEach(function (hook) {
  16.   strats[hook] = mergeHook; // 对生命周期钩子选项的合并都执行mergeHook策略
  17. });
  19. function mergeHook (parentVal,childVal) {
  20.   var res = childVal
  21.     ? parentVal
  22.       ? parentVal.concat(childVal)
  23.       : Array.isArray(childVal)
  24.         ? childVal
  25.         : [childVal]
  26.     : parentVal; // 1.如果子类和父类都拥有钩子选项，则将子类选项和父类选项合并, 2如果父类不存在钩子选项，子类存在时，则以数组形式返回子类钩子选项， 3.当子类不存在钩子选项时，则以父类选项返回。
  27.   return res
  28.     ? dedupeHooks(res)
  29.     : res
  30. }
  31. // 防止多个组件实例钩子选项相互影响
  32. function dedupeHooks (hooks) {
  33.   var res = [];
  34.   for (var i = 0; i < hooks.length; i++) {
  35.     if (res.indexOf(hooks[i]) === -1) {
  36.       res.push(hooks[i]);
  37.     }
  38.   }
  39.   return res
  40. }

简单总结，对于生命周期钩子选项，子类和父类的选项将合并成数组，这样每次执行子类的钩子函数时，父类钩子选项也会执行。