vue自定义选项合并策略

• Vue的mixins，混入的data、props、methods里面的方法与组件的方法同名时，混入的方法会被组件的方法覆盖掉，同名的钩子函数合并为一个数组，执行的顺序是先混入钩子在自身钩子
• Vue中提供了一个api(Vue.config.optionMergeStrategies),可以通过这个api自定义选项的合并策略

// 在切换浏览器页标签的时候停用当前页面组件的定时器
// 1.最简单的实现思路就是在每个组件的create中添加监听页面标签切换事件
export default {
  created () {
       window.addEventListener("visibilitychange", this.fn )
      // 使用hookEvent
      this.$on('hook:beforeDestory', () => { window.removeEventListener('visibilitychange', this.fn ) })
  }，
 methods: {
       fn () { // 清除定时器 }
  }
}

// 2. 进一步优化 封装复用 将其封装成也标签切换的钩子函数
utils/cycle.js
// 定义页面标签切换钩子函数
export function init(){
  const optionMergeStratigies = vue.config.optionMergerStratigies
  optionMergeStratigies.pageHidden  = optionMergeStratigies.created
// 定义切面切换钩子函数的触发时机和绑定vue根实例（用于递归调用子组件）
export function bind(vm){
  window.addEventListener("visibilitychange",() => {
    notifyVisibleChange("pageHidden",vm)
  })
}
notifyVisibleChange(fn,vm){
  const fnArr = vm.$options[fn]
// 钩子函数在option中以数组的形式存在
 if( fnArr && fnArr.length ) {
  // 给钩子函数绑定当前的this为当前组件实例
   fnArr.forEach( fn => fn.call(vm) )
 }
 if( vm.$children && vm.$children.length ) {
   vm.$children.forEach(child => {
      notifyVisibleChange(fn, child)
    })
 }
}
// 测试 入口文件main.js添加 
import {init,bind } from 'utils/cycle'
init()
const vm = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 将rootVm 绑定到生命周期函数监听里面
bind(vm)

//需要在监听的页面添加
pageVisible(){} pageHidden(){}