本文介绍在 Vue 3（尤其 Nuxt 环境）中，如何在父组件挂载后准确获取其真实像素宽度，并据此动态计算子组件尺寸（如方格大小），再通过 props 可靠传入子组件，解决 ref 在 computed 中尚不可用的时机问题。
本文介绍在 vue 3（尤其 nuxt 环境）中，如何在父组件挂载后准确获取其真实像素宽度，并据此动态计算子组件尺寸（如方格大小），再通过 props 可靠传入子组件，解决 `ref` 在 `computed` 中尚不可用的时机问题。
在构建响应式网格布局（如棋盘、像素画板或数据看板）时，一个常见需求是：子组件（如 <square-component>）的尺寸需严格依赖父容器（.board）的实际渲染宽度（而非 CSS 百分比或视口单位），且该宽度仅在 DOM 挂载后才能准确获取。由于 Vue 的 props 在组件初始化阶段即完成传递，而此时 ref 所绑定的 DOM 元素尚未挂载，导致直接在 computed 中访问 board.value.offsetWidth 返回 undefined 或 0 —— 这正是原问题的核心矛盾。
正确解法：使用 ResizeObserver + onMounted 实现响应式尺寸同步
我们应放弃在 computed 中即时计算 squareSize，转而采用以下三步策略：
- 初始化为 ref(0)：将 squareSize 声明为响应式引用（ref），初始值设为 0，确保子组件能接收合法数值（避免 NaN 或 undefined 引发样式异常）；
- 挂载后监听尺寸变化：在 onMounted 生命周期钩子中，利用浏览器原生 ResizeObserver 监听父容器尺寸变化，一旦获取到有效 board.value，立即计算 squareSize.value = board.value.offsetWidth / props.rows；
- 自动响应更新：ResizeObserver 会持续监听，当窗口缩放或父容器尺寸因响应式规则改变时，squareSize 自动更新，触发子组件重新渲染。
以下是优化后的父组件完整代码：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
<template>
<div ref="board" class="board">
<square-component
v-for="i in props.rows * props.cols"
:key="i"
:square-size="squareSize"
/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import squareComponent from './square-component.vue'
const board = ref(null)
const squareSize = ref(0)
const props = defineProps({
cols: { type: Number, default: 10 },
rows: { type: Number, default: 10 }
})
onMounted(() => {
// 确保 board 已挂载且存在
if (!board.value) return
const resizeObserver = new ResizeObserver(() => {
// 使用 props.rows 作为列数（按题目逻辑，此处应为 cols；若需按行均分请调整）
squareSize.value = board.value.offsetWidth / props.cols
})
resizeObserver.observe(board.value)
// 清理观察器（可选，推荐在 unmounted 中处理）
onUnmounted(() => resizeObserver.disconnect())
})
</script>
<style scoped>
.board {
width: 50vh; /* 注意：原示例中的 .5vh 极小（0.5% 视口高），疑似笔误；建议改为 50vh 或其他合理值 */
aspect-ratio: 1; /* 可选：保持正方形宽高比 */
}
</style>子组件保持简洁高效，仅需响应 squareSize 变化：
<!-- square-component.vue -->
<template>
<div :style="[sizeStyle, myOtherComputedStyles]"></div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
squareSize: { type: Number, required: true }
})
const sizeStyle = computed(() => ({
width: `${props.squareSize}px`,
height: `${props.squareSize}px`,
flexShrink: 0 // 防止 Flex 布局下被压缩
}))
// 示例：其他样式可在此扩展
const myOtherComputedStyles = computed(() => ({
backgroundColor: '#42b883',
border: '1px solid #35495e'
}))
</script>关键注意事项：
- ✅ ResizeObserver 是现代标准方案：相比 window.addEventListener('resize')，它能精确感知任意 DOM 元素尺寸变化（包括 CSS 动画、Flex/Grid 重排等），性能更优且无需手动节流；
- ⚠️ 单位校验：原示例中 .board { width: .5vh } 会导致容器极窄（约 0.5px），实际开发中请确认是否为 50vh 或 100% 等合理值；
- ? 行列逻辑澄清：题目描述为 n x n 方格且“基于 board 宽度”，因此应按列数 props.cols 均分宽度（即 offsetWidth / cols），而非 rows，代码中已修正；
- ? 资源清理：在 onUnmounted 中调用 resizeObserver.disconnect() 是良好实践，避免内存泄漏（尤其在 SSR 或动态组件场景）；
- ? 响应式保障：squareSize 为 ref，其变更会自动触发子组件 props 更新与样式重计算，无需额外 watch。
此方案兼顾准确性、响应性与可维护性，是 Vue 3 中处理“依赖挂载后 DOM 尺寸的 props 传递”问题的标准实践。
