Vue.js - 应该使用哪个组件生命周期来获取数据？答案

【问题标题】：Vue.js - Which component lifecycle should be used for fetching data?Vue.js - 应该使用哪个组件生命周期来获取数据？
【发布时间】：2019-01-04 08:23:51
【问题描述】：

在阅读了一篇关于 Vue 的 Alligator.io 帖子后，该帖子说挂载的生命周期是使用 http get 的坏地方。我想知道是否有关于如何正确从 Vue.js 中的 API 获取数据的指南？

【问题讨论】：

【解决方案1】：

回答

最好的钩子是 mounted 和 beforeMounted 预计会有一些边缘情况

为什么？

Vue 可以缓存组件，created 钩子不保证 Vue 会在下一次挂载时应用它。有时你会发现你的组件已经保存了状态。因此，如果您没有看到组件，并不意味着它还没有被创建。
SSR：如果你想获得一个通用组件，将任何 fetch 方法放置到created 挂钩是无效的。您只会在 ssr 渲染时收到错误消息。并且挂载的钩子只在客户端工作

如果您关心性能和时间，请不要。无论如何，提取将在created 和mounted 钩子之后完成，因为钩子是同步的，而提取不是。 created 和 beforeMounted 之间的时间也很短。

如果你不规划 ssr 并且你知道 Vue 是如何工作的并且你真的需要把它放到 created 钩子上，你可以把它放到 created。

【讨论】：

【解决方案2】：

答案是有道理的，但如果我们使用 mounted() 钩子来调用 API，假设 DOM 已呈现。如果我们在 mounted() 中更新一个状态，它会触发另一个渲染吗？

我确信在 created() 钩子中 DOM 尚未安装。所以，我可能会选择 created()。

【讨论】：

【解决方案3】：

created() 生命周期挂钩满足了获取和处理 API 数据的所有要求。

然而，官方 Vue 文档在示例代码中使用了 mounted() 生命周期钩子，用于与 axios 进行集成 API 调用： https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

mounted() 和 created() 两个生命周期钩子都广泛用于获取 API 数据并被认为是良好的做法。

【讨论】：

【解决方案4】：

我更喜欢在创建的钩子中调用 API。来自 alligator.io 的引述：

在 created 钩子中，您将能够访问反应数据并且事件处于活动状态。模板和虚拟 DOM 尚未安装或渲染。

因此，如果需要，您可以轻松访问数据以解析和保存来自服务器的响应。

问候。

【讨论】：