Vue3获取元素宽度数值异常问题及解决方法

问题描述 #

在Vue3中获取元素宽度有哪些可行方法？尝试获取元素宽度时遇到异常：能看到元素实际宽度，但调用获取到的数值与实际不符，请问原因是什么？

常见问题分析 #

使用computed监听元素宽度时失效，是因为computed的依赖追踪仅针对Vue的响应式数据，而元素的clientWidth/offsetWidth属于原生DOM属性，并非Vue的响应式属性，因此当元素尺寸变化时，computed不会自动触发更新，导致获取到的数值滞后或不准确。

可行方法 #

1. 结合生命周期钩子获取 #

利用onMounted（首次渲染完成后）或onUpdated（每次组件DOM更新后）钩子，确保元素已处于最新渲染状态，再获取宽度：

// 使用DOM选择器
let tableWidth = ref()
onUpdated(() => {
    tableWidth.value = document.getElementById('build-table').offsetWidth
})

// 或使用Vue绑定的ref（更推荐）
const tableRef = ref(null)
onUpdated(() => {
    tableWidth.value = tableRef.value?.offsetWidth
})

2. 用ResizeObserver监听动态变化 #

如果元素宽度会因窗口缩放、内容更新等动态变化，使用ResizeObserver可以实时监听元素尺寸变化：

const tableRef = ref(null)
const tableWidth = ref(0)

onMounted(() => {
    const observer = new ResizeObserver(entries => {
        entries.forEach(entry => {
            tableWidth.value = entry.contentRect.width
        })
    })
    tableRef.value && observer.observe(tableRef.value)
})

3. 利用nextTick获取即时宽度 #

在修改DOM后需要立即获取宽度时，使用nextTick等待DOM更新完成：

const tableRef = ref(null)
const getTableWidth = async () => {
    await nextTick()
    const width = tableRef.value?.clientWidth
    console.log(width)
}

已验证的解决方法 #

尝试computed监听元素宽度时无法检测到变化，改用onUpdated生命周期钩子可解决问题——onUpdated会在组件DOM更新完成后触发，此时能获取到元素的最新宽度。

失效的computed示例代码：

const tableWidth = computed(() => {
    return tableRef?.value?.clientWidth
})

有效的onUpdated示例代码：

let tableWidth = ref()
onUpdated(() => {
    tableWidth.value = document.getElementById('build-table').offsetWidth
})

内容的提问来源于stack exchange，提问作者Tsokoloy