使用 UML 类和序列图对 VUE 应用程序进行建模

Question

我正在尝试使用 UML 对我的 VUE 应用程序的一部分进行建模。我用一个类图来展示结构，用一个序列图来展示一个特定的行为。

有些事情我不确定：

• 关于类图：Form copmonent 导入数据criteria，谁的标准被传递给孩子，选项被传递给孙子。因此，子 FormItem 的每个实例都拥有一个标准标准，而孙 BaseRadio 的每个实例都拥有选项数组的一个选项。所以数据流是通过父级的。我还能像蓝色合成箭头所示那样关联criterium - FormItem 和option - BaseRadio 吗？
• 关于序列图，我的目标是通过发射事件和传递道具来可视化跨组件数据流和自定义事件通信。我将这些描述为同步消息，因为它们不返回任何内容，但感觉很奇怪？
• 在一个组件中调用的函数是否应该是反射消息？ （例如setoption(option):void 的序列图所示）。我猜想将计算属性 integrationChance 和 integrationProspectPercentage 表示为反身消息是错误的，因为它们不代表函数？

这里是 VUE 应用的 UML 类图草稿：

还有时序图：

这里是这个应用程序的描述：

• 函数的数据以 JSON 对象criteria 的形式导入。
• 对于每个标准（例如性别、年龄等），criteria 包含一个名为 criterium 的对象，该对象具有标签和数组选项。 options 数组为每个属性（男性、女性等）保存一个 option。
• 每个option 都有一个名称（例如男性）和对应的值（例如 0）。
• Form 组件导入 criteria 对象和其他两个组件：FormItem 和 FormResultBar。该表单仅包含一个FormResultBar。对于criteria 中的每个criterium，表单包含一个FormItem，对于每个option，FormItem 包含一个BaseRadio 按钮。
• 当用户单击BaseRadio 按钮时，其计算属性selectedValue 会向FormItem 发出一个事件，传递被单击选项的值和对应的criteriumKey。
• FormItem 组件然后设置选定的选项 (setOption()) 并保存它 (saveOption(option, criteriumKey)，方法是向父组件发送事件 Form 并传递参数 option 和 criteriumKey。在表单组件saveOption(option, criteriumKey) 通过将选定的Option 存储在 selections 对象中来保存它。
• selections 对象包含每个标准的所有选定选项。 Form 项目中的计算属性 integrationChance 然后通过添加存储在选择中的所有选项值来计算积分机会。 integrationChancePercentage 方法将逻辑回归值转换为百分比。然后将 integrationChancePercentage 作为 prop“结果”传递给 FormResultBar，并在其中显示结果。

您可以找到应用程序的实现部分here。

Answer 1

这里的关键问题不是 UML 是否适合这项工作，而是您想在图表中显示什么：

在this other question 中，我开发了可以在使用 Electron 的 JS 上下文中使用的相关图表。我认为它可能会回答您关于使用哪些图表的问题。

您选择了类图。它很好地解释了基于类及其关系的内部结构：

• 一个Vue组件可以用一个类来表示：

  组件是具有名称的可重用 Vue 实例（来源：Vue guide）

• props 可以显示为 UML 属性：

  Props 是您可以在组件上注册的自定义属性。当一个值被传递给一个 prop 属性时，它就成为该组件实例上的一个属性。 （来源：Vue guide）

  UML 类通常用一个带有 2 个分隔符的框来表示。第一部分是类名，第二部分是属性，第三部分是操作。由于可以从其他组件访问 props，因此在类图中为它们提供公共可访问性似乎更好（+ 而不是 -）

• 计算属性可以显示为派生属性，即其名称以/开头：

(...) 它的一个或多个值可以从其他信息中计算出来。涉及派生属性的操作与非派生属性的行为相同。派生属性通常被指定为只读的（即，客户端可能不会直接更改值）。但是，如果派生属性是可变的，则期望实现对模型进行适当的更改，以便满足所有约束，特别是派生属性的派生约束。 （来源：UML 规范）

• 您的“方法”是 UML 中的操作。

• 我不是 Vue 专家，但我知道“观察者”似乎是一种特殊的方法。

更一般地说，我建议为 Vue 使用自定义 UML 配置文件。它可以为每种元素（例如«Vue component»、«props»、«computed»）定义位于元素名称之前或之上的构造型。这可以传达更精确的语义，尤其是在可能存在歧义的情况下（例如方法与观察者）。

您的叙述解释了组件之间的交互。这最好用序列图记录。生命线是组件的实例或组件的 props 实例，生命线之间交换的消息将对应于 Vue 方法，以及其他交换信息的方式。