组件就是一个「带自己模板的小应用」。用 app.component('名字', { template }) 注册后，页面里就能像 HTML 标签一样用它（<hello-badge>）。
组件的模板里还能再写别的组件，于是形成「组件树」。下面四个现场：注册与嵌套、注册时机、命名与保留名坑、真实的 setup/mounted 顺序。
| 方式 | 怎么写 | 作用范围 | 适用场景 |
|---|---|---|---|
| 全局注册 | app.component('hello-badge', {...})（在 mount 之前） | 整个应用任意模板都能用 | 通用小部件（徽章、按钮、图标） |
| 局部（components 选项） | { components: { HelloBadge }, template: '<HelloBadge/>' } | 只有声明它的那个组件能用 | SFC 里最常用，谁用谁引，利于 tree-shaking |
| 动态 / 异步 | const m = await import('./Heavy.js'); app.component('Heavy', m.default) | 按需 | 大组件懒加载、运行时才决定的组件 |