vue js数据设计策略-API中的复杂JSON对象或具有PK / FK关系的简单JSON对象

Question

我正在设计一个vue.js（vue2）应用程序，该应用程序需要一个复杂的数据集，该数据集是从3NF中的4个数据库表派生的。数据将使用axios调用到PHP端点，该端点将从本地MSSQL提取数据。从概念上讲，数据的形状如下：

{
    Collection-A [
        {
          Obj1:{
            Obj1.field1,
            Obj1.field2
          },
          Obj2:{
            Obj2.field1:,
            Obj2.field2:
          },
          Collection-B:[
             {
                  CollB.field1,
                  CollB.field2,
                  CollB.Collection-C:[
                      {
                          CollC.field1:,
                          CollC.Collection-D:[0,1,2],
                          CollC.Obj3:{
                            Obj3.field1:,
                            Obj3.field2:,
                            Obj3.field3
                          },
                          CollC.Obj4:{
                            Obj4.field1:
                            Obj4.field2:
                          }
                      }...repeat Collection-C
                  ]
             }...repeat Collection-B
          ]
        }..repeat Collection-A
    ]
}

我的问题是如何最好地为数据建模以提高性能，理解和重用。

• 选项1只是将四个集合提取到data（）对象中具有PK和FK字段的不同数组中，然后使用.map和.filter查找相关记录。这将避免对象中重复数据的嵌套，因此对内存有利，但将需要计算量大的查找。它还具有使API保持简单的好处。
• 选项2是以简单形式提取数据，然后构建复杂对象以进行渲染。这会导致存储量翻倍，我必须等待所有axios请求完成：以4次调用或从对Collection-A数据的一次调用开始，然后对所需的每个数据级别进行多次调用]
• 选项3是进行单个API调用并让PHP构造数据。这将要求PHP对数据库进行四个调用（或对每个嵌套对象的迭代调用），并且将是单线程的，因此速度可能很慢，在构建PHP对象之前，我不会获得任何数据。
• 选项4是获取数据库引擎来构建复杂对象的方法，随着引擎的优化，该对象在计算上​​可能会更快。不幸的是，我的MSSQL版本仅支持FOR XML，不支持FOR JSON，因此我仍然需要将XML转换为PHP中的JSON（或使用js库）或使用游标和BCP构建JSON对象

选项1或2感觉是最干净的解决方案，因为API可重复使用且易于测试。不幸的是，GraphQL在我当前的环境中不是一个选择。任何建议将不胜感激。

Answer 1

很难给出任何具体建议，因为您的数据模型示例非常简单，并且缺少一些重要信息，例如：

1. 数据的基数是什么？ Collection-B / C中只有很少的对象被Collection-A中的许多对象使用吗？ （换句话说，不规范化时数据膨胀了多少）
2. 您如何使用应用程序中的数据？只是查看还是更新？是否需要更新B / C集合对象？
3. 在任何给定时间，您的应用需要整个数据集中的很大一部分？
4. 用例呢？感知性能对您来说有多重要？是否可以只加载和显示集合A中的对象（在某种网格中）并在需要时在后台或按需延迟加载其余数据？

您需要考虑所有需求（或为自己设置一些需求），而不仅仅是技术方面。

无论如何，这里有一些想法：

• 鉴于您的数据已经以正常格式存储，因此选项1感觉最好。例如，您可以使用Vuex ORM这样的库来简化您的工作（如果犹豫是否要使用“另一个第三方库”，请单独考虑Vuex，它由Vue核心团队维护）。
• 如果需要更新集合B / C对象，我会极力推荐这种方法（因为当您需要更新同一数据的多个副本时，这很困难）
• 内存中的数据表示和“传输中”是不同的东西。您可以决定以正常形式保存数据，但出于性能原因将其非规范化地加载（Vuex ORM将此simple-也可以用于测试）]
• 如果不需要一次所有数据，请考虑使用延迟加载