vuejs中监听窗口关闭和窗口刷新事件的方法

在Vuejs中监听窗口关闭和窗口刷新事件，需要用到window对象的“beforeunload”事件和Vue实例的生命周期钩子函数。下面是完整攻略：

1.使用window.onbeforeunload事件

我们可以在Vue实例的created生命周期钩子函数中监听window的beforeunload事件。beforeunload事件是在窗口即将关闭或刷新时触发的事件。在该事件中，我们可以调用Vue的方法，来处理需要处理的逻辑。

下面是示例代码：

<template>
  <div>
    <!-- 省略其他模板内容 -->
  </div>
</template>

<script>
export default {
  created() {
    window.addEventListener('beforeunload', this.beforeWindowClose)
  },
  methods: {
    beforeWindowClose() {
      // 处理需要做的逻辑
    },
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.beforeWindowClose)
  }
}
</script>

在上述示例中，我们在created生命周期钩子函数中，使用window.addEventListener方法，来监听window的beforeunload事件，并将beforeWindowClose方法作为事件处理程序。在beforeWindowClose方法中，我们可以编写需要做的逻辑，比如，保存未保存的数据、清除数据缓存等。注意，我们还需要在组件销毁时，调用window.removeEventListener方法，来移除事件监听器。

2.使用window.onunload事件

除了beforeunload事件，还有一个onunload事件，它是在窗口关闭时触发的事件。我们也可以使用它来监听窗口关闭事件。下面是示例代码：

<template>
  <div>
     <!-- 省略其他模板内容 -->
  </div>
</template>

<script>
export default {
  created() {
    window.addEventListener('unload', this.onWindowClose)
  },
  methods: {
    onWindowClose() {
      // 处理需要做的逻辑
    },
  },
  destroyed() {
    window.removeEventListener('unload', this.onWindowClose)
  }
}
</script>

在上述示例中，我们依然使用window.addEventListener方法来监听window的unload事件，并将onWindowClose方法作为其事件处理程序。我们在onWindowClose方法中，编写需要做的逻辑，比如，向服务器发送一些最终的数据，处理用户状态等等。同样地，在组件销毁时，我们需要使用window.removeEventListener方法，来移除事件监听器。

以上就是Vuejs中监听窗口关闭和窗口刷新事件的攻略。使用这种方法，我们可以在window关闭和刷新时，做一些提醒用户或保证程序数据得到完整保存等工作。