vue3 小技巧判断页面是否处于激活状态

方式一

1.首先引入onMounted

import { onMounted } from 'vue'

2. 可以定义一个方法来处理，我这边使用一个方法来处理

const viewOnblur = (fn) => {
  window.onblur = () => {
    console.log('未激活')
    fn(false)
  }
}

3.然后把这个方法挂在到 nMounted 中

onMounted(() => {
  viewOnblur((value) => {
    console.log('value',value)
  })
})

4.页面展示，当整个页面失去焦点的时候就会触发，或者使用window.onfocus 获取焦点，这样就可以处理很多想要的业务逻辑了

方式二

1.同样的引入onMounted

import { onMounted } from 'vue'

2. 可以定义一个方法来处理，我这边使用一个方法来处理

const Tabvisibility = (fn) => {
  document.addEventListener('visibilitychange', function () {
    // 用户息屏、或者切到后台运行 （离开页面）
    if (document.visibilityState === 'hidden') {
        console.log('hidden')
    }
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
        console.log('页面可见')
        fn(true)
    }
  })
}

3.然后把这个方法挂在到 nMounted 中

onMounted(() => {
  Tabvisibility((value) => {
    console.log('value',value)
  })
})

4.页面展示

最后，然后我想吐槽一下，面试的时候我说原生有自带的检验页面是否处于激活的状态，不过那时候具体的api忘记了，他还一直跟我杠，服了