vue3 setup 获取可视区域宽度

在 Vue3 中，如果你想获取当前组件的可视区域宽度，特别是在使用 Composition API 的 `setup` 钩子函数时，你可以利用浏览器提供的 DOM 相关方法。可以使用 `ref` 来创建一个响应式的变量，并结合 `window.innerWidth` 或者 `clientWidth` 属性来获取窗口的宽度。这里是示例代码：

import { ref } from 'vue';

export default {
  setup() {
    const viewportWidth = ref();
    
    // 在 mounted 阶段初始化或者页面尺寸变化时更新 width
    useEffect(() => {
      viewportWidth.value = window.innerWidth; // 如果你想获取整个视口宽度
      // 或者是 document.documentElement.clientWidth 获取滚动条后的可视区宽度
      // viewportWidth.value = document.documentElement.clientWidth;
      
      // 当窗口大小改变时，再次更新宽度
      window.addEventListener('resize', () => {
        viewportWidth.value = window.innerWidth;
      });
      
      // 清除事件监听，避免内存泄漏
      return () => window.removeEventListener('resize', updateViewportWidth);
    }, []);

    // 可视区域宽度现在可通过 this.viewportWidth 访问
    return { viewportWidth };
  }
}