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 参数类型对照表

三、实际开发中的黄金法则

3.1 选择策略

1. 优先使用include：当明确知道需要缓存的组件时（如后台管理系统的主工作区）
2. 谨慎使用exclude：处理第三方组件库时（如排除不需要缓存的UI组件）
3. 绝对不混用：见过最坑的案例是同时设置include和exclude导致规则相互抵消

3.2 性能优化实例

在电商平台项目中，商品列表页（ProductList）需要保留用户浏览位置，而支付页面（Payment）需要每次刷新数据。此时应该：

四、常见踩坑集锦

4.1 命名一致性陷阱

组件注册名和路由name必须完全一致，曾经有开发者写错大小写导致缓存失效：

• 错误写法：组件文件ProductList.vue，但注册时写成name:productList
• 正确写法：保持全大写或全小写命名规范

4.2 动态组件缓存难题

处理动态路由时（如/user/:id），需要通过max属性控制缓存上限，避免内存泄漏：

五、面试杀手锏回答模板

高频考题：为什么用exclude而不是include？

标准答案：
"在集成第三方组件库时，我们无法完全掌握所有组件的内部状态。比如使用ElementUI的复杂表单组件时，通过exclude排除特定组件，可以避免缓存导致的状态残留问题，这种黑名单机制比白名单更安全可控。"

六、终极选择指南

当你在include和exclude之间犹豫时，记住这个决策树：

1. 需要缓存的组件是否少于不需要的？→ 选include
2. 是否处理不可控的第三方组件？→ 选exclude
3. 是否需要精准控制内存占用？→ 结合max属性使用

最后分享一个调试技巧：在Vue开发者工具中，被缓存的组件会显示inactive标签，这是验证配置是否生效的最直接方式。

记住：合理使用缓存策略，可以让你的SPA应用获得30%以上的性能提升。现在就去检查项目中的keep-alive配置吧！如果觉得有用请点赞收藏，遇到具体问题欢迎在评论区讨论~