vue3 window.addEventListener('pageshow')

在 Vue 3 中，你可以使用 `onMounted` 钩子函数结合 `window.addEventListener` 来监听 `pageshow` 事件。`pageshow` 事件在页面重新显示时触发，例如在页面从缓存中恢复或者重新加载时。

下面是一个示例代码：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      window.addEventListener('pageshow', handlePageShow);
    });

    const handlePageShow = (event) => {
      // 页面重新显示时执行的操作
      console.log('页面重新显示了！');
    };

    return {
      handlePageShow,
    };
  },
};

在上面的示例中，当组件被挂载到 DOM 后，`onMounted` 钩子函数会被调用，并添加一个 `pageshow` 事件监听器，指定 `handlePageShow` 函数作为事件处理函数。当页面重新显示时，`handlePageShow` 函数会被调用，并输出 "页面重新显示了！" 的日志。

请注意，需要在组件的 `setup` 函数中定义 `handlePageShow` 函数，并通过 `return` 将其暴露出来，以便在模板中使用或者进行其他操作。

相关问题

vue 销毁 window.addeventlistener resize

在Vue中销毁window.addEventListener('resize')可以通过以下步骤实现：

1. 在Vue组件的销毁钩子函数中，即`beforeDestroy`或者`destroyed`函数中，注销监听器。

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

2. 在Vue组件的created钩子函数中声明并绑定一个`resize`事件的处理函数。

created() {
  this.handleResize = this.resizeHandler.bind(this);
  window.addEventListener('resize', this.handleResize);
},
methods: {
  resizeHandler() {
    // 处理窗口大小改变的逻辑
  }
}

在这里，我们声明了一个叫做`handleResize`的事件处理函数，并使用`bind`方法将其绑定到Vue组件的实例上。这样做是为了确保在事件处理函数内部可以访问组件的实例属性和方法。

3. 最后，在组件销毁时，需要在`beforeDestroy`或者`destroyed`钩子函数内部移除`resize`事件的监听器，以避免内存泄漏。

通过这种方式，我们可以在Vue组件销毁时正确地销毁`window.addEventListener`所绑定的`resize`事件监听器。这样做的好处是，可以避免在组件销毁后仍然存在的监听器导致的性能问题和内存泄漏。

vue3不执行window.addEventListener('pageshow

如果在 Vue 3 中使用 `window.addEventListener('pageshow', ...)` 时没有执行，可能有几个原因导致：

1. 确保代码处于正确的位置：确保你的代码位于 Vue 组件的 `setup` 函数中，或者在 Vue 组件的生命周期钩子函数中执行。例如，在 `onMounted` 钩子函数中执行 `window.addEventListener('pageshow', ...)`。

2. 确保事件回调函数正确定义：确保你的事件回调函数是有效的，并且没有语法错误。可以在回调函数内添加一些调试日志，以确保回调函数被正确执行。

3. 确保事件绑定只执行一次：如果你的组件被多次创建和销毁，可能会导致事件监听器重复添加。为了避免这种情况，可以在组件销毁时使用 `window.removeEventListener('pageshow', ...)` 来移除事件监听器。

下面是一个修正示例代码：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handlePageShow = (event) => {
      console.log('页面重新显示了！');
    };

    onMounted(() => {
      window.addEventListener('pageshow', handlePageShow);
    });

    onUnmounted(() => {
      window.removeEventListener('pageshow', handlePageShow);
    });
  },
};

在上面的示例中，我们使用 `onUnmounted` 钩子函数在组件销毁时移除事件监听器，以确保事件监听器只被添加一次。

如果问题仍然存在，请检查控制台是否有其他错误信息，以便进一步排查。