vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...

❝

葡萄美酒夜光杯，欲饮琵琶产品催。客户现场君莫笑，古来埋坑几人回？

❞

最近一直在开发后台管理系统，日复一日的重复着表单表格表格表单，标准的CV仔，感觉好无聊，如何能在这种无聊的开发过程中去提升自己，小编今天又整理了一波新的Vue实战技巧，这些技巧，不用则已，一用惊人。同时你也可以点击下面的链接阅读近期小编的文章。

❝

阅读小编近期的热门Vue相关文章,感谢各位掘友和群友支持，每周一，不见不散

❞

实战技巧，Vue原来还可以这样写 获赞 1600+

绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了 获赞 950+

看到赚到！重读vue2.0风格指南，我整理了这些关键规则 获赞 120+

了解选项合并策略,自定义生命周期钩子函数

当你使用Vue的mixins的时候，是否有发现，如果混入的methods里面的方法与组件的方法同名，则会被组件方法覆盖，但是生命周期函数如果重名，混入的与组件自身的都会被执行，且执行顺序是先混入和自身，这是怎么做到的呢？

1. 了解Vue合并策略

在Vue中，不同的选项有不同的合并策略，比如 data,props,methods是同名属性覆盖合并，其他直接合并，而生命周期钩子函数则是将同名的函数放到一个数组中，在调用的时候依次调用，具体可参考小编前面的一篇文章绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了

在Vue中，提供了一个api, Vue.config.optionMergeStrategies,可以通过这个api去自定义选项的合并策略。

在代码中打印

console.log(Vue.config.optionMergeStrategies)

控制台打印内容

通过上图可以看到Vue所有选项的合并策略函数，我们可以通过覆盖上面的方法，来自定义合并策略函数，不过一般用不到。

2. 通过合并策略自定义生命周期函数

背景

最近客户给领导反馈，我们的系统用一段时间，浏览器就变得有点卡，不知道为什么。问题出来了，本来想甩锅到后端，但是浏览器问题，没法甩锅啊，那就排查吧。

后来发现页面有许多定时器，ajax轮询还有动画，打开一个浏览器页签没法问题，打开多了，浏览器就变得卡了,这时候我就想如果能在用户切换页签时候将这些都停掉，不久解决了。百度里面上下检索，找到了一个事件visibilitychange,可以用来判断浏览器页签是否显示。

有方法了，就写呗

export default {
    
  created() {
    
    window.addEventListener('visibilitychange', this.$_hanldeVisiblityChange)
    // 此处用了hookEvent，可以参考小编前一篇文章
    this.$on('hook:beforeDestroy', () => {
    
      window.removeEventListener(
        'visibilitychange',
        this.$_hanldeVisiblityChange
      )
    })
  },
  methods: {
    
    $_hanldeVisiblityChange() {
    
      if (document.visibilityState === 'hidden') {
    
        // 停掉那一堆东西
      }
      if (document.visibilityState === 'visible') {
    
        // 开启那一堆东西
      }
    }
  }
}

通过上面的代码，可以看到在每一个需要监听处理的文件都要写一堆事件监听，判断页面是否显示的代码，一处两处还可以，文件多了就头疼了，这时候小编突发奇想，定义一个页面显示隐藏的生命周期钩子,把这些判断都封装起来，哪里需要点哪里，so easy(点读机记得广告费)。

自定义生命周期钩子函数

定义生命周期函数 pageHidden 与 pageVisible

import Vue from 'vue'

// 通知所有组件页面状态发生了变化
const notifyVisibilityChange = (lifeCycleName, vm) => {
    
  // 生命周期函数会存在$options中，通过$options[lifeCycleName]获取生命周期
  const lifeCycles = vm.$options[lifeCycleName]
  // 因为使用了created的合并策略，所以是一个数组
  if (lifeCycles && lifeCycles.length) {
    
    // 遍历 lifeCycleName对应的生命周期函数列表，依次执行
    lifeCycles.forEach(lifecycle => {
    
      lifecycle.call(vm)
    })
  }
  // 遍历所有的子组件，然后依次递归执行
  if (vm.$children && vm.$children.length) {
    
    vm.$children.forEach(child => {
    
      notifyVisibilityChange(lifeCycleName, child)
    })
  }
}

// 添加生命周期函数
export function init() {
    
  const optionMergeStrategies = Vue.config.optionMergeStrategies
  // 定义了两个生命周期函数 pageVisible, pageHidden
  // 为什么要赋值为 optionMergeStrategies.created呢
  // 这个相当于指定 pageVisible, pageHidden 的合并策略与 created的相同(其他生命周期函数都一样)
  optionMergeStrategies.pageVisible = optionMergeStrategies.beforeCreate
  optionMergeStrategies.pageHidden = optionMergeStrategies.created
}


// 将事件变化绑定到根节点上面
// rootVm vue根节点实例
export function bind(rootVm) {
    
  window.addEventListener('visibilitychange', () => {
    
    // 判断调用哪个生命周期函数
    let lifeCycleName = undefined
    if (document.visibilityState === 'hidden') {
    
      lifeCycleName = 'pageHidden'
    } else if (document.visibilityState === 'visible') {
    
      lifeCycleName = 'pageVisible'
    }
    if (lifeC