分分鐘理解生命鉤子函數合併策略

生命週期鉤子選項的合併策略

生命週期鉤子選項：

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源碼讀起來真雞兒爽！！！

複製代碼