Vue组件逻辑封装的核心是用组合式函数抽离可复用、可测试、可维护的业务逻辑，分层为UI层、逻辑层、状态层，合理使用插槽替代props泛滥，并对外暴露最小必要接口。
Vue 组件的逻辑封装，核心不是“把代码塞进一个文件”，而是让逻辑可复用、可测试、可维护。真正高效的封装，往往发生在组件之外——用组合式函数（Composable）抽离业务逻辑，再由组件按需调用。
用组合式函数替代 mixins 或重复 setup 逻辑
过去在 Vue2 中常用 mixins 复用逻辑，但存在命名冲突、隐式依赖、调试困难等问题。Vue3 的组合式函数天然规避了这些问题，且支持 TypeScript 精准推导。
- 把通用能力（如表单校验、分页请求、权限判断、防抖搜索）写成独立的
useXxx()函数 - 函数内部使用
ref、computed、watch等响应式 API，返回状态和操作方法 - 组件中直接解构使用，语义清晰，无副作用，便于单元测试
组件内逻辑分层：UI 层 + 逻辑层 + 状态层
一个高质量组件，不等于“所有东西都写在 setup 里”。应主动分层，降低耦合：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
UI 层：仅负责结构渲染、插槽分发、样式类名控制（比如
<UserCard>只管怎么展示，不处理点击后跳转哪 -
逻辑层：通过
useUserActions()或useModalControl()封装交互行为，含事件响应、状态变更、副作用处理 -
状态层：用
ref/reactive管理本地状态，或通过provide/inject向下透传共享状态
合理使用插槽与作用域插槽，避免 props 泛滥
当组件需要承载动态内容或定制化交互时，优先用插槽而非一堆 props 控制显示逻辑。
立即学习“前端免费学习笔记（深入）”；
- 默认插槽用于替换主体内容（如按钮文字、卡片正文）
- 具名插槽划分区域（
header、footer、actions），提升扩展性 - 作用域插槽传递数据（如
item、index），让父组件决定如何渲染每一项 - 避免出现
showIcon、showLabel、labelPosition这类“配置型 props”，它们往往是插槽更自然的信号
对外暴露最小必要接口，隐藏实现细节
组件不是“功能集合体”，而是有明确契约的模块。使用者只需知道“能做什么”，不必关心“怎么做”。
- 用
defineProps明确声明输入，配合 TypeScript 接口约束类型和必填项 - 用
defineEmits声明输出事件，避免随意$emit('xxx') - 如需子组件提供方法（如表单校验、重置），用
defineExpose主动暴露，不默认全部可访问 - 内部状态、计算属性、私有方法不参与通信，不暴露给父组件
