写 Angular 项目时，经常遇到一个选择题：想让某个元素不显示，该用 *ngIf 还是 [hidden]？很多人觉得“反正都看不见”，随手一写就完事。结果页面卡顿、列表滚动变慢、内存占用悄悄升高——问题可能就出在这俩指令上。
先看效果，再聊性能
表面上看，*ngIf="false" 和 [hidden]="true" 都能让元素消失。但背后做的事完全不同：
*ngIf 是“真删”：条件为假时，Angular 直接从 DOM 中移除整个元素及其子组件，连生命周期钩子（比如 ngOnDestroy）都会触发；条件为真时，才重新创建、渲染、挂载。
[hidden] 是“假藏”：元素始终在 DOM 里，只是加了 style="display: none;"。组件实例不销毁，数据绑定持续运行，定时器、HTTP 订阅、事件监听全都在后台默默干活。
一个真实场景对比
比如你有个订单详情页，底部有个「编辑地址」弹窗，平时收起来，点击按钮才展开。如果用 [hidden]="!showAddressModal"，哪怕弹窗关着，里面那个地址选择器组件还在监听地图 API、轮询定位、重绘坐标点——而用户根本看不到它。
换成 *ngIf="showAddressModal"，弹窗关闭瞬间，整个模块被干掉，内存释放，监听自动取消，CPU 负担立马轻了。
代码一眼分高下
<!-- 用 hidden：DOM 还在，JS 还在跑 -->
<app-address-picker [hidden]="!isOpen"></app-address-picker>
<!-- 用 ngIf：DOM 没了，组件彻底歇菜 -->
<app-address-picker *ngIf="isOpen"></app-address-picker>再比如表格里每行都有个「操作菜单」，默认隐藏。如果用 [hidden]，100 行就是 100 个待命的菜单组件，每个都在监听鼠标移入移出、计算位置、维护状态；用 *ngIf，只有鼠标悬停的那一行才创建菜单，其他 99 行干净利落。
什么时候可以放心用 hidden？
不是所有情况都要上 *ngIf。比如一个开关按钮旁的提示文字：<span [hidden]="!showHint">点击保存后生效</span>。它没子组件、没异步请求、没定时器，就纯文本，用 [hidden] 反而更快——省去了反复创建销毁的开销。
简单记一句：内容轻、无逻辑、切换频繁（比如 tab 标签页），优先 [hidden]；内容重、有副作用、不常显示（比如错误弹窗、配置面板），果断 *ngIf。
别等用户抱怨“怎么越用越卡”，翻翻控制台内存快照，十有八九是几百个被 [hidden] 偷偷养着的组件在后台喘粗气。