在 vue 3 中，用 watcheffect 监听窗口宽度需先用 ref 包装 window.innerwidth 并手动绑定 resize 事件更新该 ref，再在 watcheffect 中读取 width.value 实现响应式列数计算，如 math.max(1, math.floor(width.value / 320))，最后 onunmounted 清理事件监听。
在 Vue 3 中，用 watchEffect 监听窗口宽度并动态计算列表列数，核心是把 window.innerWidth 包装成响应式依赖，并在副作用中实时更新列数。它比手动监听 resize 事件 + onMounted/onUnmounted 更简洁，且自动追踪依赖、自动清理。
把窗口宽度转为响应式信号
Vue 本身不直接响应原生 DOM 属性，所以不能直接 watchEffect(() => window.innerWidth) —— 这不会触发重运行（缺少响应式依赖）。需要借助 ref 或 computed 拆解出可追踪的响应式值：
- 定义一个
ref存储当前宽度，比如const width = ref(window.innerWidth) - 在
watchEffect外部用window.addEventListener('resize', ...)手动更新该ref -
watchEffect内读取width.value，就能自动追踪变化
在 watchEffect 中计算列数逻辑
列数通常由容器宽度和单列最小宽度决定（例如卡片宽度 + 间距），常见策略是「向下取整」或「根据断点区间映射」：
