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

Question

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

有些事情我不确定:

• 关于类图:Form 组件导入数据criteria，该数据的标准被传递给子级，选项被传递给孙级。因此，子 FormItem 的每个实例都包含一个标准条件，而孙子 BaseRadio 的每个实例都包含选项数组的一个选项。所以数据流是通过父级的。我仍然可以按照蓝色组合箭头所示的方式关联criterium - FormItem 和option - BaseRadio 吗？
• 关于序列图，我的目标是通过发出事件和传递 props 来可视化跨组件数据流和自定义事件通信。我将它们描绘为同步消息，因为它们不返回任何内容，但这感觉很奇怪？
• 在一个组件内调用的函数是否应该是自反消息？ (例如 setoption(option):void 的序列图所示)。我猜计算属性 integrationChance 和 integrationProspectPercentage 作为反射消息的表示是错误的，因为它们不代表函数？

这里是描绘 VUE 应用程序的 UML 类图草稿:

以及序列图:

这里是这个应用程序功能的描述:

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

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

Answer 1

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

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

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

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

  Components are reusable Vue instances with a name (source: Vue guide)

• props 可以将其显示为 UML 属性:

  Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. (source: Vue guide)

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

• 计算属性可以显示为派生属性，即其名称前面带有 /:

(...) its value or values may be computed from other information. Actions involving a derived Property behave the same as for a nonderived Property. Derived Properties are often specified to be read-only (i.e., clients may not directly change values). But where a derived Property is changeable, an implementation is expected to make appropriate changes to the model in order for all the constraints to be met, in particular the derivation constraint for the derived Property. (source: UML specifications)

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

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

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

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