利用Vue3中的监听器功能完成退出时弹窗提醒

        接到一个需求是，当有修改的内容未保存时，关闭网页会跳转到当前未保存的页面并提示。一开始我是用vue的生命周期函数，在触发修改方法时新增事件监听器，在触发reset时删除事件监听器。后面发现用vue的监听器，只需要额外定义一个变量editFlag, 监听此变量即可很方便的开启提示、关闭提示。代码如下：       

// 定义是否编辑标识, 在触发修改事件时会修改为true
const state = reactive({
    editFlag: false,
})


// 定义关闭窗口时的事件方法
function handleBeforeUnload(event) {
  const message = 'You have unsaved data. Are you sure you want to leave?？';
  event.returnValue = message; // 标准的跨浏览器兼容性处理
  return message; // 为了某些浏览器的兼容性而返回信息
};


// 核心部分：监听编辑标识(确定是否开启弹窗提醒)
watch(() => state.editFlag, (newValue, oldValue) => {
  if(state.editFlag){
    window.addEventListener('beforeunload', handleBeforeUnload);
  }else {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  }
})

        最后实现的效果，当页面内容被编辑过，关闭浏览器时会出现如下提醒。

        如果页面内容未被修改过，也就是state.editFlag=false。此时关闭浏览器时无任何提醒, 会直接关闭。

        最后我发现自定义的内容并不能在浏览器上显示。

const message = 'You have unsaved data. Are you sure you want to leave?？ hi';

百度查询得到如下结果：

        请注意，现代浏览器对于onbeforeunload事件的支持已经变得越来越严格，很多现代浏览器不再允许自定义的警告信息，而是展示一个标准的警告信息。此外，由于用户体验和隐私保护的原因，许多现代浏览器已经不再允许自定义这个弹窗的内容，而是展示一个固定的字符串。因此，上述代码可能在某些浏览器环境下无效。

总之最后有了提示效果。我在前端也是初学者阶段，所以简单做一个记录。