在 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）
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
Bootstrap Grid 栅格系统
共0课时 | 0人学习
如何使用 Figma AI 将网站美化 10 倍
共0课时 | 195人学习
WEB前端教程【HTML5+CSS3+JS】
共101课时 | 21万人学习
