Ajax 填充组件的Vue方法

我似乎找不到任何信息，说明如何最好地将数据放入组件中。为了定义这个问题，假设我们在数据库中有一个

user

表，这个表有一个ID，可能还有30个字段，其中包含关于用户的详细信息

现在，如果我想创建一个显示许多用户详细信息列表的Vue组件，让我们称之为

。要在页面上显示此信息，请执行以下操作：

1） 调用数据库以获取您想要显示的所有用户并获取其ID，然后使用

执行for循环，并使Vue对某些API进行ajax调用并获取详细信息

2） 或者，使用30多个字段的内联版本

3） 或者，在此用户列表中使用特定的Vue组件，可能是用户没有验证电子邮件或其他内容，然后使用ajax

我看到的问题是，在案例1中，您已经为IDs调用了数据库，然后使用几乎相同的SQL使用ajax再次调用数据库

在案例2中，每次使用组件时填写这么多字段是很烦人的

在案例3中，您将得到大量组件

---

如何处理此问题？

您找不到此类信息，因为它与Vue无关。Vue不关心您使用它的目的和数据的结构。它的目的是让你做任何你想做的事

正如它不关心文件夹结构的外观（因为在其核心，渲染所需的只是一个DOM元素），它也不关心如何组织API、如何构造应用程序、页面甚至组件

显然，拥有这么多的自由并不总是一件好事。如果您环顾四周，您会发现专业使用Vue的人已经接受了某些模式/结构，这些模式/结构允许更好的代码重用和更大的灵活性。Nuxt就是这样一个好例子

对于刚开始使用Vue的人，我建议尽快尝试使用Nuxt，即使这对他们的小项目来说有点过分，因为他们可能会学到一些好的模式

---

谈到您的具体问题，在数据API体系结构方面，您总是要问自己：基本原则是什么

基本原则是使您的应用程序尽可能快。理想情况下，为了做到这一点，您需要准确获取要显示的数据量，而不是更多。因此：

• 在获取相同的数据时，如果您有选择，请始终尝试减少请求数。您不希望列表中的每个项在呈现时都启动对服务器的调用。对整个列表进行一次调用（仅获取列表视图中显示的内容），并在用户请求时调用详细信息（按详细信息按钮）
• 调整分页以适应屏幕上可以显示的项目数，也可以根据加载页面所需的时间进行调整。如果需要的时间太长，请降低页面大小，并允许您的项目有更多的填充空间。如果你想一想，大多数人更喜欢一个页面上项目较少（并且有大量填充的项目）的快速应用程序，而不是一个只需几秒钟就能加载每个页面并显示出扭曲的项目的应用程序，这些项目很难点击/点击，或者很难在列表中跟随而不丢失行

然而，你必须对这些指南持保留态度。在绝大多数情况下，在一次调用中获取完整数据对用户体验几乎没有影响。很多时候，延迟与服务器冷启动有关（第一次调用服务器需要更长的时间，因为它需要“唤醒它”-但随后所有相同类型的调用都会更快），图像未优化或互联网连接不良（如中所示，无论您只收到名称还是完整的详细信息列表，它都工作得很差）

要记住的另一个方面是，一次获取所有数据是一种权衡。您确实会得到一个较慢的初始调用，但之后您可以在列表视图和详细视图之间进行无缝动画，因为数据已经被获取，不需要更多的加载。如果您友好地处理加载状态，那么在许多情况下，这是一个可行的选择

---

最后，但并非最不重要的是，你的第二点缺点并不存在。您始终可以一次性绑定所有详细信息：

<user-details v-bind="user" />

但是，这些是

组件的子组件，它们被提取以帮助您保持代码的条理化。它们不应完全取代

。类似地，您可以提取用户详细信息页眉或页脚组件，只要有意义。您的目标应该是保持代码整洁有序。遵循任何对你更有意义的原则

---

最后，如果我在做出代码体系结构决策时必须挑选出一条有用的指导原则，那肯定是DRY原则。如果您最终不必在同一个应用程序中的多个位置编写相同的代码，那么您就做对了

---

希望您会发现上面的一些有用信息。

您不会找到这些信息，因为它们与Vue无关。Vue不关心您使用它的目的和数据的结构。它的目的是让你做任何你想做的事

正如它不关心文件夹结构的外观（因为在其核心，渲染所需的只是一个DOM元素），它也不关心如何组织API、如何构造应用程序、页面甚至组件

显然，拥有这么多的自由并不总是一件好事。如果您环顾四周，您会发现专业使用Vue的人已经接受了某些模式/结构，这些模式/结构允许更好的代码重用和更大的灵活性。Nuxt就是这样一个好例子

对于刚开始使用Vue的人，我建议尽快尝试使用Nuxt，即使这对他们的小项目来说有点过分，因为他们可能会学到一些好的模式

---

开始讨论你的具体问题

<user-details :id="user.id" :name="user.name" :age="user.age" ... />

<div v-if="isLoadingUsers" />
<user-list v-else :users="users">
   <user-list-item v-for="(user, key) in users"
                   :key="key"
                   v-bind="user" 
                   @click="selectedUser = user" />
</user-list>
<user-details-modal v-bind="selectedUser" />

<user-detail>
  ... common details (title, description, etc...)

  <div v-if="user.isValidated">
     ...normal case
  </div>
  <user-not-validated v-bind="user" v-else />

  ... common functionality (action bar, etc...)
</user-detail>