@样式覆盖问题
症状描述
一些奇奇怪怪的样式追踪不到是哪里设置的
成因分析与解决
- 原因：浏览器默认，父级样式继承，类名冲突等，太多地方能影响样式了!
planA
- 日常注意样式分离，如Vue的
scrope和React的css-module
planB：擦屁股
- 使用内联样式覆盖
- 使用
important!神级样式覆盖 - 在组件的逻辑文件中引入样式文件覆盖（此时组模板已经挂载完毕，所以相当于重绘）
危害等级：3星
@数据异步覆盖问题
症状描述
很多数据log出来明明正确，渲染结果却并不相符！
成因分析与解决
- 原因：可能一开始渲染正确，但被什么地方给异步修改了
- PlanA：最好当然是查出来修改的地方
- PlanB：使用一个 延时定时器 在渲染完毕若干毫秒后再暴力覆盖一回
- PS：如果我们不能将魔方的面还原，我们就暴力上色（无耻但好使~）
危害等级：4星
@TS类型问题
症状描述
无法精准定义参数的TS类型
成因分析与解决
- 百度掘金GPT
- 先断言为any，后期再慢慢去查
- 允许any，或允许隐式any
危害等级：3星
@mixin相互覆盖问题
早期一度很爱用
mixin去抽取复用逻辑，后来就发现很难定位逻辑的出处
成因分析与解决
- 使用 指令、插槽、甚至插件 去复用逻辑
- 当然到了Vue3时代就基本首先想到 自定义Hook 了
危害等级：1星/小白专属
@setState异步渲染问题
症状描述
明明重新设置了state但渲染结果不正确（第一弹）！
成因分析与解决
-
原因：异步渲染问题
-
在上一次渲染完毕后再设置新的state
this.setState(prevState => {
return { count: prevState.count + 1 };
});
- 如果想要实时查看界面状态：
this.setState({ count: this.state.count + 1 }, () => {
// 在回调函数中访问最新的状态值
console.log(this.state.count);
});
危害等级:1星/小白专属
@setState不可变值问题
症状描述
明明重新设置了state但渲染结果不正确（第2弹）！
成因分析与解决
-
原因：setState的不可变值问题，即没有改变原来state的地址
-
正确地操作数组：
setAarr([...arr,newItem])
- 正确地操作对象：
setObj(
{...obj, age:newAge}
)
- 正确地操作对象：
setObj(
Object.assign(obj, {age:newAge})
)
危害等级:1星/小白专属
@新版本不靠谱问题
症状描述
uniapp + Vue3 + uView2.0 开发小程序，各种问题，巨坑无比！
成因分析与解决
- 使用
uniapp + Vue2 + uView1.0开发小程序 - 日常开发，如无特别指示，永远首选过去的稳定工程模板/脚手架
危害等级:5星
@网上资料不靠谱问题
症状描述
网上很多大家都用的解决方案在自己中的工程中却并不好使！
成因分析与解决
- 网上的资料很多都是基于工具和库的旧版本跑起来的
- 我们在查找资料时通常要看一下博客的撰写日期，越近期越优先
- 或者在搜资料时指明自己的框架和打包工具版本
- 自己日产也要多记笔记
危害等级:2星
@Webpack配置分离问题
症状描述
开发环境下Webpack配置怎么也跑不起来，生产环境到倒是好好的！
成因分析与解决
- 开发环境下Webpack是跑不起分包配置的
- 将Webpack的 公用配置、生产环境配置、开发环境配置、测试环境配置 分离到不同文件
- 然后再通过webpack提供的
merge函数合并起来
开发环境：
module.exports = merge(commonConfig,devConfig)测试环境：
module.exports = merge(commonConfig,testingConfig)生产环境：
module.exports = merge(commonConfig,prodConfig)
危害等级:1星/小白专属
@库版本不兼容问题
症状描述
开发中的头号问题：各种第三方库不兼容！
成因分析与解决
- 特别高发于WP4/5之间，各种
loader和plugin互不兼容 - 特定版本的库组合的
package.json收藏起来随时复用 - 再完美一点工程模板放在 码云或Github 上收藏复用
- 再完美一点使用 自定义脚手架 拉取历史模板创建工程
危害等级:5星
@屎山重构问题
症状描述
重构屎山，自觉很完美，但再也没法正确运行起来了！
成因分析与解决
- 对正确运行的屎山要怀有足够的敬意！
- 永远要拉取新的分支去重构屎山，确保万无一失了再合并回去！
- 在合并时也是，永远要在副本分支上去合并，不要破坏现有劳动成果！
- 多备份，小心驶得万年船，不要做真的变成那个删库跑路的小白！
危害等级:5星
@端口占用问题
80端口（或其它指定端口）被占用！
成因分析与解决
PlanA：找出并杀死占用进程
- 常规使用netstat扫描端口占用情况：
netstat -ano | findstr "端口号" - 然后使用taskkill杀可疑进程：
taskkill /F /PID 进程PID
PlanB：各种重启
- 不好使时依次：关闭所有终端-重启应用-重启IDE-重启电脑
PlanC：换一个端口
- 此时有一个废物进程在后台持续消耗资源
危害等级:3星
@版本坍塌问题
症状描述
dev分支被（神队友）彻底玩坏了！
成因分析与解决
- 回退版本，或者使用其他人的健康版本去临时替代被玩坏的dev
- 日常将master/dev分支的合并权限收归leader
- 开发者应在自己的功能分支上：合并dev + 解决掉所有冲突 + 充分测试 + 提交PR
危害等级:5星
@接口坍塌问题
症状描述
服务端迟迟不能交付正确接口！
成因分析与解决
- 前端要有一整套 “健全的” mock接口
- 当后台接口坑掉时，前台
api接口参数一个useMock=true，即一键切换到mock接口！
危害等级:3星
