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

Posted 2023-02-22

【中文标题】Vue.js - 应该使用哪个组件生命周期来获取数据？

【英文标题】：Vue.js - Which component lifecycle should be used for fetching data?

【发布时间】：2019-01-04 08:23:51

【问题描述】：

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

【问题讨论】：

Which VueJS lifecycle hook must Asynchronous HTTP requests be called in?的可能重复

好吧，我要求更深入的解释，是的，我知道这 3 个挂钩被认为是好的，但为什么在这种情况下，mounted 被认为是坏的。

@kkot 您的问题得到解答还是希望进一步解释？

【参考方案1】：

回答

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

为什么？

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

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

如果你不规划 s-s-r 并且你知道 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 尚未安装或渲染。

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

问候。