在 Vue 3 中，当子组件尺寸需根据父容器实际渲染后的像素宽度（如 board.offsetWidth）动态计算时，因 props 在挂载前已传递，直接在 computed 中访问 ref DOM 元素会失败；正确做法是使用 ResizeObserver 在 onMounted 后监听并响应式更新尺寸值。
在 vue 3 中，当子组件尺寸需根据父容器实际渲染后的像素宽度（如 `board.offsetwidth`）动态计算时，因 props 在挂载前已传递，直接在 `computed` 中访问 `ref` dom 元素会失败；正确做法是使用 `resizeobserver` 在 `onmounted` 后监听并响应式更新尺寸值。
在 Vue 3（尤其是组合式 API）中，实现“父容器宽度驱动子组件尺寸”的核心挑战在于时机问题：ref 所绑定的 DOM 元素仅在组件挂载（mounted）后才可用，而 props 的初始传递和 computed 的求值发生在挂载前，导致 board.value 为 undefined，无法获取 offsetWidth。
✅ 正确解法是：
- 将 squareSize 改为响应式引用 ref(0)，而非 computed；
- 在 onMounted 钩子中创建 ResizeObserver，监听 board.value 的尺寸变化，并实时更新 squareSize.value；
- 子组件通过 props.squareSize 接收该响应式数值，配合 computed 生成内联样式，实现像素级精准控制。
以下是优化后的完整实现：
父组件（Board.vue）
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
<template>
<div ref="board" class="board">
<SquareComponent
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 './SquareComponent.vue'
const board = ref(null)
const squareSize = ref(0) // ✅ 使用 ref 而非 computed，支持异步赋值
const props = defineProps({
cols: { type: Number, default: 10 },
rows: { type: Number, default: 10 }
})
onMounted(() => {
if (!board.value) return
// ✅ 使用 ResizeObserver 监听父容器宽高变化（含初始渲染）
const resizeObserver = new ResizeObserver(() => {
// 注意：此处按 `props.rows` 分割宽度是逻辑假设（如 n 行等分），实际应按列数 cols 更合理：
squareSize.value = board.value.offsetWidth / props.cols
})
resizeObserver.observe(board.value)
// ? 可选：组件卸载时清理观察器（推荐用于长生命周期组件）
onUnmounted(() => {
resizeObserver.disconnect()
})
})
</script>
<style scoped>
.board {
width: 50vh; /* ⚠️ 原示例中的 `.5vh` 过小（0.5视口高度 ≈ 几像素），易导致计算为 0，建议修正为合理值如 `50vh` */
aspect-ratio: 1/1;
}
</style>子组件（SquareComponent.vue）
<template>
<div :style="[sizeStyle, otherStyles]"></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
}))
// 示例：其他可复用样式（如边框、过渡等）
const otherStyles = computed(() => ({
border: '1px solid #e0e0e0',
transition: 'background-color 0.2s'
}))
</script>? 关键注意事项：
- 单位校验：CSS 中 width: .5vh 实际为 0.5vh（视口高度的 0.5%），通常不足 1px，会导致 offsetWidth 返回 0，务必检查并设置合理尺寸（如 50vh 或 100%）。
- ResizeObserver 兼容性：现代浏览器均支持；若需兼容旧版 IE，需引入 polyfill（如 resize-observer-polyfill）。
- 性能考量：ResizeObserver 回调高频触发时，squareSize.value 的响应式更新本身开销极低，但应避免在回调中执行重绘密集操作。
- 逻辑一致性：示例中按 props.cols 计算单格宽度（更符合“n×n 网格”语义），若业务需按行数分割，请明确注释设计意图。
通过 ResizeObserver + ref + onMounted 组合，我们既尊重了 Vue 的响应式机制，又精准捕获了 DOM 实际布局尺寸，是 Vue 3 动态尺寸场景下的标准实践方案。
