vue3 监听resize窗口事件,离开页面要销毁窗口事件。

在Vue 3中，可以使用组合式API（Composition API）来创建响应式的数据，并且使用onMounted和onUnmounted生命周期钩子来处理组件的挂载和卸载。对于监听窗口的resize事件，可以使用Vue 3的window对象的addEventListener方法来添加事件监听，并在onUnmounted钩子中移除该事件监听。

以下是一个简单的例子：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script>
import { onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    // 定义resize事件的处理函数
    const handleResize = () => {
      // 处理窗口大小变化的逻辑
      console.log('窗口大小已变化');
    };
 
    // 在组件挂载时添加事件监听
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });
 
    // 在组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
  }
}
</script>

在这个例子中，当组件被挂载时，它将添加一个事件监听器来监听resize事件。当组件被卸载时，它将移除该事件监听器，以防止潜在的内存泄漏。这是一个很好的实践，尤其是在处理全局事件时，确保你的应用程序中不会有任何未完成的引用或者事件监听器。