Vue Dialog 组件封装的两种设计模式对比

在 Vue 开发中，我们经常需要使用 Dialog 来打开表单，这时候有两种主要的封装方式来组织这类组件：

• 方式1：将 Dialog 和表单一起封装到一个组件里
• 方式2：表单单独封装为组件，Dialog 放在父组件中

组件销毁策略

通常我们会在 Dialog 不展示的时候销毁其中的内容，可以通过在 Dialog 上添加 :close-on-click-modal="true" 来实现这一功能。

两种设计模式的详细对比

方式1：Dialog 和表单一体化封装

优点：

• 高内聚性：所有相关逻辑都集中在一个组件中，便于理解和维护
• 使用简便：调用时只需引入一个组件即可，API 简洁
• 适用场景明确：特别适合该 Dialog 只在项目中单一场景使用的情况

缺点：

• 复用性受限：表单逻辑与 Dialog 强耦合，无法在其他场景下单独复用
• 组件体积偏大：职责不够单一，违反单一职责原则
• 测试维护复杂：需要同时测试 Dialog 和表单逻辑，增加了测试复杂度

方式2：表单独立封装，Dialog 在父组件

优点：

• 职责清晰分离：表单组件可以在不同展示容器中复用（Dialog、Drawer、页面等）
• 组件灵活性高：表单可以独立进行测试、维护和迭代
• 父组件控制力强：可以更灵活地控制 Dialog 的行为（打开/关闭时机、位置、动画效果等）

缺点：

• 状态管理复杂：需要在父组件中管理更多状态（如 dialogVisible）
• 通信成本增加：组件间需要更多的 props 传递和事件处理
• 使用门槛提升：使用时需要同时引入表单组件并管理 Dialog 状态

最佳实践推荐

选择方式1的场景：

• 表单只在单一 Dialog 场景中使用
• 业务逻辑相对简单
• 项目规模较小，组件复用需求不强

选择方式2的场景：

• 表单需要在多个地方复用
• 项目规模较大，需要更好的组件解耦
• 团队开发，需要明确的职责分工
• 对组件测试和维护有较高要求

总结

两种封装方式各有其适用场景，关键在于根据具体的业务需求和项目特点来选择。在实际开发中，建议优先考虑组件的复用性和可维护性，当这些因素不是主要考虑点时，可以选择更简单直接的封装方式。