抽象组件不渲染ui、只注入功能逻辑，如；逻辑组件封装业务逻辑并保留最小ui结构，如，二者核心区别在于是否参与dom渲染与用户可见性。
抽象组件和逻辑组件不是 Vue 官方术语，但它们是社区中对两类特定组件的常用概括性称呼，核心区别在于：抽象组件不渲染 UI，只提供功能逻辑或状态管理；逻辑组件则封装可复用的业务逻辑，但通常仍保留 UI 结构（哪怕极简），并参与渲染流程。
抽象组件：无渲染、纯功能注入
抽象组件本质是“不可见的逻辑容器”，它不输出任何 DOM，也不定义 template。它的存在只为向子组件注入能力，比如事件代理、状态共享、生命周期钩子增强等。常见实现方式是通过 render 函数 + 插槽（slot）+ this.$slots.default，把子内容原样透传，自身只做逻辑处理。
- 典型例子：
<keep-alive></keep-alive>、<transition></transition>、<teleport></teleport>—— 它们本身不生成可见元素，只控制子组件的行为或挂载位置 - 自定义时需避免声明
template，改用render(h) { return this.$slots.default } - 不能直接用在模板中作为视觉元素；若误加样式或文本节点，会被忽略
逻辑组件：封装行为，附带最小 UI 壳
逻辑组件关注“做什么”，但会提供一个轻量级、语义化的 UI 容器（如一个 <div> 或 <code><span></span>），用来包裹内容、绑定事件、传递 props，并可能内置默认交互逻辑（如防抖点击、加载状态切换）。它有明确的结构输出，属于可复用的“功能+界面”单元。
- 典型例子：一个带 loading 状态和重试逻辑的
<asyncbutton></asyncbutton>，它渲染按钮标签，但把请求、错误、加载等逻辑内聚其中 - 支持 props 配置行为（如
timeout、autoReset），也支持@success、@error等事件向外通知 - 可独立使用，也可嵌套其他组件；样式可通过 class / scoped CSS 控制外观
关键区分点：是否参与 DOM 渲染与用户可见性
判断一个组件是否为抽象组件，最直接的方式是看它有没有实际渲染内容——如果移除它，页面视觉完全不变，仅逻辑行为受影响，那它大概率是抽象的；反之，若去掉它会导致结构缺失、事件丢失或样式错乱，那就是逻辑组件（或普通 UI 组件）。
- 抽象组件常用于高阶封装，比如权限控制
<authguard></authguard>（只校验权限后决定是否显示插槽内容） - 逻辑组件更贴近业务场景，比如
<searchbar></searchbar>（含搜索框、清空按钮、关键词高亮逻辑） - 两者都强调复用与解耦，但抽象组件偏向框架层思维，逻辑组件更贴近应用层开发习惯
