vue组件中监听或拦截窗口关闭事件

参考：Window：beforeunload 事件 - MDN

应用场景：

有时我们希望在页面关闭时做些事情，比如更新状态。vue提供的生命周期钩子无法在关闭/刷新浏览器窗口时触发。

解决方案

监听

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  window.addEventListener('beforeunload', updateStatus)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', updateStatus)
  updateStatus()
})

function updateStatus() {
  // 执行操作，如更新状态
}
</script>

监听并拦截

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  window.addEventListener('beforeunload', updateStatus)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', updateStatus)
})

function updateStatus($event) {
  // 拦截窗口关闭事件
  $event.preventDefault()
  $event.returnValue = '确定要刷新页面吗？'
  return '确定要刷新页面吗？'
}
</script>