VueUse 中的 beforeunload 是什么？怎么用？

在前端开发中,我们常常会遇到一些需要在页面卸载（比如用户关闭页面、跳转页面等情况）时执行特定操作的场景，VueUse 是一个非常实用的 Vue 工具库，其中的 beforeunload 就为我们提供了方便的解决方案，那 VueUse 中的 beforeunload 到底是什么？又该怎么用呢？下面我们来详细探讨。

VueUse 中的 beforeunload 是什么？

VueUse 中的 beforeunload 是一个组合式函数（Composition API 风格的函数），它是基于浏览器原生的 beforeunload 事件进行封装的，在浏览器中，beforeunload 事件会在页面即将被卸载（比如用户点击关闭按钮、通过链接跳转到其他页面等）的时候触发，而 VueUse 对其进行封装后，让我们在 Vue 项目中可以更方便、更优雅地使用这个事件。

它的作用主要是让我们能够在页面卸载前执行一些自定义的逻辑,当用户在一个表单填写页面还未保存数据就准备离开时，我们可以通过 beforeunload 事件弹出提示框，询问用户是否确认离开，避免数据丢失。

怎么使用 VueUse 中的 beforeunload？

（一）安装 VueUse

你需要在你的 Vue 项目中安装 VueUse，如果你的项目是基于 npm 管理依赖的，那么可以在终端中执行以下命令：

npm install @vueuse/core

如果是使用 yarn 管理依赖，则执行：

yarn add @vueuse/core

（二）基本使用示例

假设我们有一个简单的 Vue 组件，我们想要在用户离开这个组件所在页面时执行一些操作，下面是一个基本的使用示例：

<template>
  <div>
    <h2>这是一个测试页面</h2>
    <p>这里可以放置一些页面内容</p>
  </div>
</template>
<script setup>
import { beforeunload } from '@vueuse/core';
const handleBeforeUnload = (event) => {
  // 这里可以编写你在页面卸载前想要执行的逻辑
  // 比如弹出提示框
  event.preventDefault();
  event.returnValue = '';
  return '您确定要离开此页面吗？';
};
beforeunload(handleBeforeUnload);
</script>

在上面的代码中,我们首先从 @vueuse/core 中导入了 beforeunload 函数，然后定义了一个 handleBeforeUnload 函数，这个函数会在 beforeunload 事件触发时被调用，在这个函数中，我们通过 event.preventDefault() 阻止了浏览器默认的快速关闭行为（不同浏览器可能有不同的默认提示），并设置了 event.returnValue 以及返回了一个提示信息，这样，当用户准备离开页面时，浏览器就会弹出一个包含我们提示信息的确认框。

（三）更复杂的场景应用

结合组件的生命周期

我们可能希望在组件挂载时添加 beforeunload 事件监听，在组件卸载时移除监听，虽然 VueUse 的 beforeunload 函数本身会自动处理一些生命周期相关的事情（比如在组件卸载时自动移除监听），但我们也可以更明确地结合 Vue 的生命周期来使用。

<template>
  <div>
    <h2>结合生命周期的示例</h2>
    <p>这里是页面内容</p>
  </div>
</template>
<script setup>
import { beforeunload, onMounted, onUnmounted } from '@vueuse/core';
let unlistenBeforeUnload;
const handleBeforeUnload = (event) => {
  event.preventDefault();
  event.returnValue = '';
  return '您确定要离开吗？';
};
onMounted(() => {
  unlistenBeforeUnload = beforeunload(handleBeforeUnload);
});
onUnmounted(() => {
  if (unlistenBeforeUnload) {
    unlistenBeforeUnload();
  }
});
</script>

在这个例子中,我们在组件挂载（onMounted）时调用 beforeunload 函数并保存返回的取消监听函数（unlistenBeforeUnload），然后在组件卸载（onUnmounted）时调用这个取消监听函数，这样可以更精确地控制事件监听的添加和移除。

根据条件触发 beforeunload 逻辑

假设我们有一个表单组件,只有当表单中有未保存的修改时，才在用户离开页面时弹出提示，我们可以这样实现：

<template>
  <div>
    <h2>表单页面</h2>
    <input v-model="formData" type="text" />
    <button @click="saveData">保存数据</button>
  </div>
</template>
<script setup>
import { beforeunload, ref } from '@vueuse/core';
const formData = ref('');
let hasUnsavedChanges = ref(false);
const saveData = () => {
  // 模拟保存数据的操作
  hasUnsavedChanges.value = false;
};
const handleBeforeUnload = (event) => {
  if (hasUnsavedChanges.value) {
    event.preventDefault();
    event.returnValue = '';
    return '您有未保存的修改，确定要离开吗？';
  }
};
formData.value = '初始数据';
// 监听 formData 的变化来判断是否有未保存的修改
formData.value = watch(formData, (newValue, oldValue) => {
  if (newValue!== oldValue) {
    hasUnsavedChanges.value = true;
  }
});
beforeunload(handleBeforeUnload);
</script>

在这个表单组件中,我们通过 ref 定义了 formData 和 hasUnsavedChanges，当 formData 发生变化时（通过 watch 监听），设置 hasUnsavedChanges 为 true，在 handleBeforeUnload 函数中，只有当 hasUnsavedChanges 为 true 时，才执行阻止页面卸载并弹出提示的逻辑，这样就实现了根据具体条件触发 beforeunload 相关操作的功能。

（四）注意事项

浏览器兼容性

虽然大多数现代浏览器都支持 beforeunload 事件，但还是要注意一些细节，不同浏览器对于提示框的展示和用户操作的处理可能略有差异，为了用户体验，有些浏览器可能会对自定义的提示信息进行一定的限制或修改展示方式。

性能考虑

如果在 beforeunload 事件处理函数中执行过于复杂或耗时的操作，可能会影响页面的卸载性能，甚至导致浏览器出现卡顿等情况，尽量保证事件处理函数中的逻辑简洁高效。

与其他库或框架的冲突

如果你的项目中同时使用了其他操作 beforeunload 事件的库或框架，要注意它们之间可能存在的冲突，可以通过合理的代码组织和事件监听管理来避免冲突，明确每个库或框架对 beforeunload 事件的处理时机和方式，确保它们不会互相干扰。

VueUse 中的 beforeunload 为我们在 Vue 项目中处理页面卸载场景提供了便捷的工具，通过简单的安装和引入，我们可以轻松地在页面卸载前执行自定义逻辑，无论是弹出提示框防止数据丢失，还是结合组件生命周期和具体业务条件进行更复杂的操作，都能很好地满足需求，但在使用过程中，我们也要注意浏览器兼容性、性能以及与其他库的冲突等问题，以确保我们的应用在各种情况下都能稳定、高效地运行，希望通过本文的介绍，你能对 VueUse 中的 beforeunload 有更深入的理解，并能在实际项目中灵活运用。