踩坑 & 备忘

前端开发中遇到过的高频问题和解决方案，涵盖框架、样式、语言、网络和工程化等维度。 每个问题都包含：问题描述、原因分析、解决方案、预防措施和真实场景。

Vue

• Vue 常见踩坑 — v-if/v-for 优先级、响应式丢失、数组下标赋值、watch 深监听、组件销毁清理、路由复用、nextTick 时机、props 单向数据流、Suspense

CSS

• CSS 常见踩坑 — margin 重叠（BFC）、浮动塌陷、z-index 层叠上下文、Retina 屏 1px 边框、Flex 不换行、overflow hidden 失效、图片底部空隙、文字省略号、sticky 失效、transform 破坏 fixed 定位

JavaScript

• JavaScript 常见踩坑 — typeof 判断、浮点数精度、this 指向丢失、闭包陷阱、async/await 错误处理、深拷贝局限、对象比较、parseInt 进制、for...in 原型链、Promise 并发控制、事件委托、localStorage 限制

TypeScript

• TypeScript 常见踩坑 — 多余属性检查、非空断言隐患、类型收窄、枚举反向映射、泛型约束、接口 vs 类型别名、any vs unknown、模块导入声明、Vue 组件类型、条件类型推断

网络请求

• 网络请求踩坑 — CORS 跨域、预检请求 OPTIONS、Cookie 携带、Token 过期刷新、请求取消、文件下载、超时设置、302 重定向、Content-Type 匹配、HTTP 缓存策略

浏览器兼容

• 浏览器兼容性踩坑 — iOS Safari 100vh/dvh、fixed 抖动、键盘遮挡输入框、日期格式、下拉刷新、Android Flex 布局、CSS Grid 兼容、CSS 变量降级、async/await polyfill、fetch 兼容、IntersectionObserver、passive 事件

打包构建

• 打包构建踩坑 — 静态资源 404、路由懒加载白屏、打包体积优化（按需引入/CDN 外部化）、图片路径错误、环境变量、Vite/Rollup 兼容、Webpack 构建速度、HMR 失效、CSS Modules、Polyfill、eval 安全审计、微前端资源加载