在 Vue 3 中，当子组件尺寸需依赖父容器渲染后的实际像素宽度（如 board.offsetWidth）时，因 props 在挂载前已解析，需借助 onMounted 和 ResizeObserver 动态响应尺寸变化，并通过响应式 ref 实时更新传递。
在 vue 3 中，当子组件尺寸需依赖父容器渲染后的实际像素宽度（如 `board.offsetwidth`）时，因 props 在挂载前已解析，需借助 `onmounted` 和 `resizeobserver` 动态响应尺寸变化，并通过响应式 `ref` 实时更新传递。
在 Vue 3（尤其是 Nuxt 3 环境）中，直接在 computed 中访问 ref 绑定的 DOM 元素（如 board.value）会返回 undefined，因为此时组件尚未挂载，DOM 节点不可用。而 squareSize 又需作为 prop 传给多个
✅ 正确解法是：将 squareSize 声明为 ref(0)，并在 onMounted 中使用 ResizeObserver 监听父容器尺寸变化，动态更新其值。ResizeObserver 是现代浏览器原生 API，能高效、无抖动地响应元素宽高变更，且兼容 Vue 的响应式系统——只要 squareSize.value 被修改，所有依赖它的子组件都会自动重渲染。
以下是优化后的父组件完整实现：
<!-- Board.vue -->
<template><div ref="board" class="board">
<square-component v-for="i in props.rows * props.cols" :key="i" :square-size="squareSize"></square-component>
</div>
</template><script setup>
import { ref, onMounted } from 'vue'
import squareComponent from './square-component.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
// ✅ 初始化尺寸，并监听后续变化
const observer = new ResizeObserver(() => {
// 注意：此处按列数 cols 分割更符合「n×n 方格均分」语义（原问题中误写为 /rows）
squareSize.value = board.value.offsetWidth / props.cols
})
observer.observe(board.value)
})
</script><style scoped>
.board {
width: 50vh; /* ⚠️ 原代码中 .5vh 过小（0.5 viewport height），应为 50vh 或其他合理值 */
aspect-ratio: 1/1;
display: grid;
grid-template-columns: repeat(v-bind(cols), 1fr);
}
</style>
子组件保持简洁，仅消费 squareSize 并生成内联样式：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
<!-- 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(() => ({
backgroundColor: '#42b883',
border: '1px solid #35495e'
}))
</script>
? 关键注意事项：
- ResizeObserver 必须在 onMounted 中初始化，确保 board.value 已真实挂载；
- 若父容器宽高由 CSS（如 vh, vw, %, aspect-ratio）驱动，ResizeObserver 仍能准确捕获变化，无需手动轮询；
- 避免在 computed 中读取 DOM 尺寸（如原代码中的 board.value.offsetWidth），因其不具备响应性且挂载前为空；
- squareSize 使用 ref 而非 computed，是因为它需被外部（ResizeObserver 回调）主动写入，而 computed 是只读的；
- 若需支持 SSR（如 Nuxt），ResizeObserver 仅在客户端执行，天然安全；服务端渲染时 squareSize 初始为 0，首屏可能短暂空白，可通过 v-if="squareSize > 0" 或骨架屏优化体验。
此方案兼顾性能、可维护性与 Vue 3 响应式范式，是处理「依赖布局尺寸的动态 prop 传递」的标准实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
