vue3 怎么拿到组件的宽

### 获取 Vue3 组件宽度的方法

#### 使用 `useScreenWidth` 函数监听窗口尺寸变化
为了响应式地获取整个视窗的宽度，可以定义并使用自定义组合函数 `useScreenWidth`。此方法通过侦听全局窗口对象上的 resize 事件来更新存储在响应式变量中的宽度值。

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

export default function useScreenWidth() {
    const screenWidth = ref(window.innerWidth);

    const handleResize = () => {
        screenWidth.value = window.innerWidth;
    };

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

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

    return { screenWidth };
}

这种方法适用于需要知道浏览器窗口整体大小的情况[^1]。

#### 利用 `useResizeObserver` 实现更细粒度控制
对于特定 DOM 节点（如单个组件），推荐采用基于 Resize Observer API 的解决方案——即利用 `@vueuse/core` 提供的 `useResizeObserver` 工具。这允许开发者针对具体元素设置回调，在其尺寸发生变化时触发相应操作。

import { ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';

const tabRef = ref(null);

function getData(el) {
    if (!el || !Array.isArray(el)) return;

    console.log(`Element width is ${el[0].contentRect.width}px`);
}

watch(
    () => tabRef.value,
    (newValue) => {
        if (newValue) {
            useResizeObserver(newValue.$el, getData);
        }
    }
);

上述代码片段展示了如何绑定一个 Ref 类型属性至目标 HTML 元素，并对其应用观察者模式以捕获任何布局调整后的最新测量数据[^2]。

#### 动态计算子组件内部结构比例关系
当面临像使某个容器内的项目数量依据可用空间自动适应的需求时，则需综合考虑父级设定的影响以及自身内容排布特性等因素。假设存在这样一个场景：希望保持某区域内显示项的比例恒定不变；那么可以在模板里声明好相应的样式规则之后，再借助 JavaScript 来完成最终渲染前的最后一公里工作：

<template>
  <div :style="containerStyle">
    <!-- 子元素 -->
  </div>
</template>

<script setup lang="ts">
import { computed, shallowRef } from 'vue';

// 假设这里已经获得了外部传入或者自行计算得到的基础单位长度 baseUnitWidth
let baseUnitWidth = /* ... */ ;

const containerElm = shallowRef<Element | null>(null);
const containerStyle = computed(() => ({
  '--base-unit-width': `${baseUnitWidth}px`,
}));

defineExpose({ containerElm });
</script>

<style scoped>
/* 定义 CSS 变量 */
.container {
  display: flex;
  gap: var(--gap-size, 8px);
  padding-inline-start: calc(var(--gap-size));
  list-style-position: inside;
}

.item {
  min-width: var(--base-unit-width);
  max-width: var(--base-unit-width);
  box-sizing: border-box;
}
</style>

在此基础上，还可以进一步优化性能表现，比如仅当实际发生变动时才重新评估所需展示的内容条目数等[^3]。