vue3+ts+vite监听窗口变化

在Vue 3 + TypeScript + Vite中监听窗口变化可以通过使用Vue Composition API中的`onMounted`和`onUnmounted`钩子函数以及`window.addEventListener`来实现。

首先，你需要在Vue组件中引入`onMounted`和`onUnmounted`钩子函数，它们分别用于在组件挂载和卸载时执行相应的逻辑。然后，你可以在`onMounted`钩子函数中使用`window.addEventListener`来监听窗口变化事件，比如`resize`事件。最后，在`onUnmounted`钩子函数中使用`window.removeEventListener`来移除事件监听器，以避免内存泄漏。

下面是一个示例代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script lang="ts">
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'YourComponent',
  setup() {
    const handleResize = () => {
      // 处理窗口变化的逻辑
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
  },
};
</script>

在上面的示例中，我们定义了一个名为`handleResize`的函数来处理窗口变化的逻辑。然后，在`onMounted`钩子函数中使用`window.addEventListener`来监听窗口的`resize`事件，并在事件发生时调用`handleResize`函数。最后，在`onUnmounted`钩子函数中使用`window.removeEventListener`来移除事件监听器。