vue3监听视口宽度

Vue 3 提供了Composition API，使得响应式编程变得更加灵活。为了监听视口宽度的变化，我们可以使用 JavaScript 的 `window.innerWidth` 属性结合 Vue 3 的响应式系统。以下是一个基本的示例来展示如何在 Vue 3 中监听视口宽度变化：

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    // 创建一个响应式引用ref来存储视口宽度
    const viewportWidth = ref(window.innerWidth);

    // 定义一个函数，用于更新视口宽度的响应式引用
    const updateViewportWidth = () => {
      viewportWidth.value = window.innerWidth;
    };

    // 在组件挂载后，添加窗口事件监听器
    onMounted(() => {
      window.addEventListener('resize', updateViewportWidth);
    });

    // 在组件卸载前，移除窗口事件监听器
    onUnmounted(() => {
      window.removeEventListener('resize', updateViewportWidth);
    });

    // 返回响应式数据和其他需要的值
    return {
      viewportWidth
    };
  }
};

在模板中，你可以使用这个响应式的 `viewportWidth` 来进行条件渲染或者显示当前的视口宽度：

<template>
  <div>当前视口宽度: {{ viewportWidth }}</div>
</template>

通过上述方法，你可以创建响应式的视口宽度监听器，它会在视口大小变化时自动更新。