不推荐用 Getter 实现动态宽高计算，因其无法响应屏幕变化；应使用 computed + resize 监听或封装 useScreenScale 等可复用 hook 来实现自动适配。
直接用 Getter 实现动态宽高计算并不推荐，它无法响应屏幕尺寸变化，也不适合做实时适配逻辑。
Getter 本身不适合大屏自适应
Getter 是用于定义只读属性的语法糖，它的值在访问时才计算，但不会自动监听 window.resize 或 DOM 尺寸变更。即使你在 Vue 的 data 或 computed 中写一个 getter，它也不会因为屏幕缩放或窗口大小改变而重新求值——除非你手动触发依赖更新，而这违背了响应式设计初衷。
真正需要的是：能感知视口变化、按需重算、并驱动样式更新的机制，比如：
- Vue 的 computed + onMounted/onUnmounted 监听 resize
- 原生 ResizeObserver 观察容器尺寸
- 封装成可复用的 composable（如 useScreenScale）
更实用的替代方案：用 computed + resize 监听
以 Vue 3 Composition API 为例，你可以这样组织逻辑：
定义一个响应式比例对象：
const scale = ref(1)
const designWidth = 1920
const designHeight = 1080
<p>onMounted(() => {
const updateScale = () => {
const w = document.documentElement.clientWidth
const h = document.documentElement.clientHeight
const scaleX = w / designWidth
const scaleY = h / designHeight
scale.value = Math.min(scaleX, scaleY) // 等比缩放，防变形
}</p><p>updateScale()
window.addEventListener('resize', updateScale)
onBeforeUnmount(() => window.removeEventListener('resize', updateScale))
})
然后在模板中使用：
<div class="screen-canvas" :style="{ transform: `scale(${scale.value})`, transformOrigin: 'top left' }">
<!-- 所有子组件按 1920x1080 设计 -->
</div>
如果坚持用 getter，必须配合 reactive 依赖
你可以在 setup 中定义一个 reactive 对象，并把 scale 放进里面，再通过 getter 计算派生值，但仍需手动触发更新：
const state = reactive({
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight
})
<p>// 这个 getter 会响应 state 的变化
const canvasScale = computed(() => {
return Math.min(
state.clientWidth / 1920,
state.clientHeight / 1080
)
})</p><p>// resize 时手动更新 state
window.addEventListener('resize', () => {
state.clientWidth = document.documentElement.clientWidth
state.clientHeight = document.documentElement.clientHeight
})
注意：这不是纯 getter 行为，本质仍是依赖响应式系统 + 手动同步。
真正推荐的做法：封装成可复用的 hook
把缩放逻辑抽离成独立 hook，便于多页面复用和测试：
// composables/useScreenScale.js
export function useScreenScale(designW = 1920, designH = 1080) {
const scale = ref(1)
<p>const update = () => {
const w = document.documentElement.clientWidth
const h = document.documentElement.clientHeight
scale.value = Math.min(w / designW, h / designH)
}</p><p>onMounted(() => {
update()
window.addEventListener('resize', update)
})</p><p>onBeforeUnmount(() => {
window.removeEventListener('resize', update)
})</p><p>return { scale }
}
使用时简洁清晰：
setup() {
const { scale } = useScreenScale(1920, 1080)
return { scale }
}
不复杂但容易忽略：Getter 只是语法，不是响应式引擎。大屏适配的关键不在“怎么写”，而在“谁来触发重算”和“何时应用结果”。
