必须在哪个 VueJS 生命周期钩子中调用异步 HTTP 请求？

Question

我想知道在呈现页面之前如何向我的服务器发送异步 GET 请求以检索数据并填充数据中的属性。我听说最好的方法是在 Vue js 提供的三个生命周期钩子之一中调用发送此请求的函数，这些钩子在 DOM 呈现之前运行。这三个是 beforeCreate() ， created() ， beforeMount() 。理想情况下，该请求必须调用哪一个？为什么？

原文由 Baalateja Kataru 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TL;DR 在一般（和安全）情况下，使用 created() 。

Vue 的初始化代码是同步执行的。

从技术上讲，您在 beforeCreate() 、 created() 、 beforeMount() 中运行的任何异步代码只会在 所有 这些挂钩完成后响应。看演示：

 new Vue({
  el: '#app',
  beforeCreate() {
    setTimeout(() => { console.log('fastest asynchronous code ever') }, 0);
    console.log('beforeCreate hook done');
  },
  created() {
    console.log('created hook done');
  },
  beforeMount() {
    console.log('beforeMount hook done');
  },
  mounted() {
    console.log('mounted hook done');
  }
})

 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  Check the console.
</div>

换句话说，如果您在 beforeCreate() 中进行 Ajax 调用，无论 API 响应多快，响应只会在稍后处理，在 created() 执行之后。

那么什么应该指导你的决定呢？

• 只需要尽快触发呼叫？
  • 使用 beforeCreate()
  • 为什么？
    • 它比那些钩子中的任何一个运行得都快，但是……
• 需要立即 读取或修改 data 吗？
  • 使用 created()
  • 为什么？
    • 状态仅在 beforeCreate() 和 created() 之间初始化，因此如果您 在 created() 之前分配一些数据，它将丢失。
• 需要在 created() 之后生成的任何内容吗？
  • 使用 beforeMount()
  • 为什么？
    • 我不知道在 created() 不可用，在 beforeMount() 除了编译的 this.$options.render 以及渲染函数之外 可用的任何东西，（参见 源代码以及 渲染函数）所以这种情况一定是非常罕见的情况。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

vue-router 文档对从组件渲染所需的服务器检索数据时使用的模式提出了一些建议（请参阅底部的链接）。

为了确定在哪里执行 GET 请求，他们首先询问您是否要导航到发起异步 GET 请求 之前 或 之后 的路由

如果你想获取数据然后导航到路由（ _在导航之前_）那么文档建议在 beforeRouteEnter() 保护传入组件确保调用 next() 中执行异步请求--- beforeRouteEnter() 完成异步数据请求后。如果您选择此模式，您将希望显示某种加载指示器，因为在获取数据之前不会发生到组件路由/渲染的导航。

如果您想导航到路线然后启动请求（ _在导航之后_），那么文档建议在 created() 挂钩中执行请求并使用 v-if 有条件地显示组件是加载，发生错误，或数据到达后的视图。

强烈建议查看文档，它们有代码示例并且写得很好。 https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

原文由 Bobby 发布，翻译遵循 CC BY-SA 4.0 许可协议