include 和 exclude 有啥区别？3 分钟让你彻底弄懂！
为什么你总是分不清这两个词？
刚入行的程序员小明最近很苦恼：在Vue项目里配置keep-alive时，看到include和exclude就像看到双胞胎，明明长得像，用起来却总出bug。这其实和日常生活中的「允许名单」与「禁止名单」原理完全一致。举个例子，你家的智能门锁设置：include是录入家人的指纹，exclude则是屏蔽推销员的访问权限。
核心区别一句话总结：
include是”只允许这些”，exclude是”除了这些都不要”。就像微信群里的@全体成员（include）和踢出群聊（exclude）操作，本质上都是对集合的筛选操作。
二、技术层面深度对比
2.1 定义与行为模式
- include（包含）：
白名单机制，仅处理匹配规则的组件。比如在Vue中设置include=["HomePage","UserCenter"]，表示只缓存这两个页面组件。 - exclude（排除）：
黑名单机制，跳过匹配规则的组件。当设置exclude=/Login/时，表示所有带Login字样的组件都不缓存。
2.2 参数类型对照表
| 类型 | include | exclude |
|---|---|---|
| 字符串 | 组件名完全匹配 | 组件名完全排除 |
| 正则表达式 | 匹配组件名的模式 | 排除组件名的模式 |
| 数组 | 多组件联合匹配 | 多组件联合排除 |
三、实际开发中的黄金法则
3.1 选择策略
- 优先使用include：当明确知道需要缓存的组件时（如后台管理系统的主工作区）
- 谨慎使用exclude：处理第三方组件库时（如排除不需要缓存的UI组件）
- 绝对不混用：见过最坑的案例是同时设置include和exclude导致规则相互抵消
3.2 性能优化实例
在电商平台项目中，商品列表页（ProductList）需要保留用户浏览位置，而支付页面（Payment）需要每次刷新数据。此时应该：
四、常见踩坑集锦
4.1 命名一致性陷阱
组件注册名和路由name必须完全一致，曾经有开发者写错大小写导致缓存失效：
- 错误写法：组件文件ProductList.vue，但注册时写成name:productList
- 正确写法：保持全大写或全小写命名规范
4.2 动态组件缓存难题
处理动态路由时（如/user/:id），需要通过max属性控制缓存上限，避免内存泄漏：
五、面试杀手锏回答模板
高频考题：为什么用exclude而不是include？
标准答案：
“在集成第三方组件库时，我们无法完全掌握所有组件的内部状态。比如使用ElementUI的复杂表单组件时，通过exclude排除特定组件，可以避免缓存导致的状态残留问题，这种黑名单机制比白名单更安全可控。”
六、终极选择指南
当你在include和exclude之间犹豫时，记住这个决策树：
- 需要缓存的组件是否少于不需要的？→ 选include
- 是否处理不可控的第三方组件？→ 选exclude
- 是否需要精准控制内存占用？→ 结合max属性使用
最后分享一个调试技巧：在Vue开发者工具中，被缓存的组件会显示inactive标签，这是验证配置是否生效的最直接方式。
记住：合理使用缓存策略，可以让你的SPA应用获得30%以上的性能提升。现在就去检查项目中的keep-alive配置吧！如果觉得有用请点赞收藏，遇到具体问题欢迎在评论区讨论~
正文完
