在Vue中我們有如下生命周期方法：

vue生命周期

給vue增加一個(gè)擴(kuò)展函數(shù)

• Vue合并策略
  在Vue中使用mixins時(shí)會(huì)發(fā)現(xiàn)， data,props,methods是同名屬性覆蓋合并。生命周期函數(shù)是合并調(diào)用。
  這個(gè)原理就是 “合并策略” 導(dǎo)致的。
  在Vue中，提供了一個(gè)api, Vue.config.optionMergeStrategies,可以通過(guò)這個(gè)api去自定義選項(xiàng)的合并策略。
• 我們可以利用optionMergeStrategies 這個(gè)屬性來(lái)給 Vue實(shí)例增加一個(gè)擴(kuò)展函數(shù)。

import Vue from 'vue'

// 通知所有組件頁(yè)面狀態(tài)發(fā)生了變化
const notifyVisibilityChange = (lifeCycleName, vm) => {
  // 生命周期函數(shù)會(huì)存在$options中，通過(guò)$options[lifeCycleName]獲取生命周期
  const lifeCycles = vm.$options[lifeCycleName]
  // 因?yàn)槭褂昧薱reated的合并策略，所以是一個(gè)數(shù)組
  if (lifeCycles && lifeCycles.length) {
    // 遍歷 lifeCycleName對(duì)應(yīng)的生命周期函數(shù)列表，依次執(zhí)行
    lifeCycles.forEach(lifecycle => {
      lifecycle.call(vm)
    })
  }
  // 遍歷所有的子組件，然后依次遞歸執(zhí)行
  if (vm.$children && vm.$children.length) {
    vm.$children.forEach(child => {
      notifyVisibilityChange(lifeCycleName, child)
    })
  }
}

/**
 * 添加生命周期鉤子函數(shù)
 * @param {*} rootVm vue 根實(shí)例，在頁(yè)面顯示隱藏時(shí)候，通過(guò)root向下通知
 */
export function init() {
  const optionMergeStrategies = Vue.config.optionMergeStrategies
  /*
    定義了兩個(gè)生命周期函數(shù) pageVisible, pageHidden
    為什么要賦值為 optionMergeStrategies.created呢
    這個(gè)相當(dāng)于指定 pageVisible, pageHidden 的合并策略與 created的相同（其他生命周期函數(shù)都一樣）
   */
  optionMergeStrategies.pageVisible = optionMergeStrategies.beforeCreate
  optionMergeStrategies.pageHidden = optionMergeStrategies.created
}

/**
 * 將事件變化綁定到根節(jié)點(diǎn)上面
 * @param {*} rootVm
 */
export function bind(rootVm) {
  window.addEventListener('visibilitychange', () => {
    // 判斷調(diào)用哪個(gè)生命周期函數(shù)
    let lifeCycleName = undefined
    if (document.visibilityState === 'hidden') {
      lifeCycleName = 'pageHidden'
    } else if (document.visibilityState === 'visible') {
      lifeCycleName = 'pageVisible'
    }
    if (lifeCycleName) {
      // 通過(guò)所有組件生命周期發(fā)生變化了
      notifyVisibilityChange(lifeCycleName, rootVm)
    }
  })
}

使用

1. 在main.js主入口文件引入

import { init, bind } from './utils/custom-life-cycle'

// 初始化生命周期函數(shù), 必須在Vue實(shí)例化之前確定合并策略
init()

const vm = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 將rootVm 綁定到生命周期函數(shù)監(jiān)聽(tīng)里面
bind(vm)

2. 在需要的地方監(jiān)聽(tīng)生命周期函數(shù)

export default {
  pageVisible() {
    console.log('頁(yè)面顯示出來(lái)了')
  },
  pageHidden() {
    console.log('頁(yè)面隱藏了')
  }
}

理解

這種方式不僅可以作用在跟實(shí)例上，也可以作用于某個(gè)頁(yè)面。微信小程序的 onShow()；onHidden() 實(shí)現(xiàn)也類似于這樣吧。