分分钟理解生命钩子函数合并策略

生命周期钩子选项的合并策略

生命周期钩子选项：

function mergeHook (
  parentVal: ?Array<Function>,
  childVal: ?Function | ?Array<Function>
): ?Array<Function> {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})
复制代码

这是用来合并生命周期钩子的，先看看forEach语句：

使用 forEach 遍历 LIFECYCLE_HOOKS 常量，那说明这个常量应该是一个数组， 咱们再来看看

LIFECYCLE_HOOKS常量是什么复制代码

export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured'
]
复制代码

　　LIFECYCLE_HOOKS 常量其实是由与生命周期钩子同名的字符串组成的数组

forEach 语句，它的做用就是在 strats 策略对象上添加用来合并各个生命周期钩子选项的策略函数，而且这些生命周期钩子选项的策略函数相同：

都是 mergeHook 函数

return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
复制代码

　　

mergeHook 函数内部处理操做，总体上是由三元运算符构成

return (是否有 childVal，即判断组件的选项中是否有对应名字的生命周期钩子函数)
  ? 若是有 childVal 则判断是否有 parentVal
    ? 若是有 parentVal 则使用 concat 方法将两者合并为一个数组
    : 若是没有 parentVal 则判断 childVal 是否是一个数组
      ? 若是 childVal 是一个数组则直接返回
      : 不然将其做为数组的元素，而后返回数组
  : 若是没有 childVal 则直接返回 parentVal
复制代码

　　也就是说判断子选项和父选项是否有，而后进行对应的处理，

若是子选项和父选项都有 则合并成为一个数组 等。。。。

它判断是否有 childVal，即组件的选项是否写了生命周期钩子函数，若是没有则直接返回了 parentVal

若是有 parentVal 那么其必定是数组，若是没有 parentVal 那么 strats[hooks] 函数根本不会执行

接下来看看几种实例：更加明确的学习生命周期选项策略：

new Vue({
  created: function () {
    console.log('created')
  }
})
复制代码

　　strats.created 策略函数来说 ，created就是childVal，它是一个函数。parentVal 应该是 Vue.options.created，但 Vue.options.created 是不存在的，因此最终通过 strats.created 函数的处理将返回一个数组：

options.created = [
  function () {
    console.log('created')
  }  
]
复制代码

　看下一个例子：

const Parent = Vue.extend({
  created: function () {
    console.log('parentVal')
  }
})

const Child = new Parent({
  created: function () {
    console.log('childVal')
  }
})
复制代码

　　Child 是经过new parent生成的 Child 就是childVal， Parent 就是parentVal

childVal：

created: function () {
  console.log('childVal')
}
复制代码

　parentVal：（Parent.options.created）

Parent.options.created = [
  created: function () {
    console.log('parentVal')
  }
]
复制代码

　　这个例子有 childVal，又有 parentVal，根据mergeHooks 函数：

parentVal.concat(childVal)，将 parentVal 和 childVal 合并成一个数组

created: function () {
    console.log('parentVal')
  },
  created: function () {
    console.log('childVal')
  }
]
复制代码

　　

Array.isArray(childVal)]？
这一段三元运算表明什么？
说明vue 生命周期钩子是能够写成数组的，是否是很惊讶 很神奇，从未有过的姿式，如此的爽！
复制代码

new Vue({
  created: [
    function () {
      console.log('first')
    },
    function () {
      console.log('second')
    },
    function () {
      console.log('third')
    }
  ]
})
复制代码

　　vue源码读起来真鸡儿爽！！！

复制代码