Vue组件注册分全局与局部：全局注册适用于高频复用的基础UI、设计系统组件，一次注册全项目可用但无法tree-shaking；局部注册适用于页面级、业务耦合组件，作用域隔离、支持懒加载且利于维护。
Vue 中全局组件和局部组件不是“选哪个更好”，而是“用在哪儿更合适”。核心原则就一条：高频复用、通用性强的组件走全局；业务专属、使用范围明确的组件走局部。用错位置，轻则打包体积膨胀，重则引发命名冲突或维护混乱。
哪些组件适合全局注册
全局注册本质是“一次注册，处处可用”，但代价是无法被 Webpack 或 Vite 的 tree-shaking 移除。所以只该用于真正跨模块、跨页面频繁使用的底层 UI 元素：
-
基础 UI 组件：比如
MyButton、MyInput、MyCard，它们不携带业务逻辑，只负责样式与交互规范； -
设计系统级组件：如
Icon、Toast、Modal，通常由 Design System 统一维护，全项目强依赖； -
无状态或配置化组件：像
PageHeader或EmptyState，内容靠 props 驱动，不绑定具体页面数据。
注意：即使决定全局注册，也建议集中管理——例如统一放在 src/components/base/ 目录，并用 require.context 自动导入，避免 app.component() 堆砌在 main.js 里。
哪些场景必须用局部注册
局部注册是 Vue 项目的默认推荐方式，尤其适用于：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
页面级功能模块：比如商品列表页里的
ProductFilterBar、订单页的OrderSummaryCard，只在当前页面有意义； -
带业务逻辑的子组件：如
CheckoutStep2或UserProfileEditor，耦合了 API 调用、表单验证等上下文； - 实验性或临时组件：尚未稳定、可能快速迭代或下线的功能块，避免污染全局命名空间；
-
需要按需加载的组件：配合
defineAsyncComponent实现懒加载，局部注册天然支持，而全局组件无法异步注册。
命名与冲突规避技巧
全局组件名一旦注册，就进入整个应用的标签命名空间。Vue 不校验重复注册，但后注册的会覆盖前一个——这很容易埋雷：
- 强制使用带项目前缀的命名，如
MyButton而非Button，避免与未来 HTML 标准或第三方库冲突； - 团队内约定组件分类前缀：
BaseButton（基础）、UiModal（通用交互）、PageDashboardChart（页面专属）； - 在 CI 流程中加入检查脚本，扫描所有
app.component()调用，确保无重复名称注册； - 局部组件可自由命名，无需前缀，因为作用域天然隔离——这是它最安静也最安全的优势。
性能与可维护性权衡
很多人忽略一个事实：全局注册 ≠ 更快渲染。它只省去 import 和 components 声明，但带来两个隐性成本：
- 所有全局组件随主包一起加载，哪怕某个路由完全不用它，也会增加首屏 JS 体积；
- 组件间依赖变模糊——你很难一眼看出某个页面到底用了哪些组件，重构时容易误删或遗漏；
- 局部组件的 import 路径清晰、IDE 可跳转、类型推导准确，对 TypeScript 和大型协作项目更友好。
因此，中大型项目建议把全局组件控制在 10 个以内，其余一律局部注册。上线前用构建分析工具（如 rollup-plugin-visualizer）确认组件是否真的被 tree-shaken 掉。
