你不知道的vue生命周期钩子选项(三)

 

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

上篇文章我们说完strats.data 这篇我们介绍生命周期钩子选项：

 

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源码读起来真鸡儿爽！！！

  几天没更了 加班到脑壳痛。。。