我想知道在呈现页面之前如何向我的服务器发送异步 GET 请求以检索数据并填充数据中的属性。我听说最好的方法是在 Vue js 提供的三个生命周期钩子之一中调用发送此请求的函数，这些钩子在渲染 DOM 之前运行。这三个是beforeCreate()、created()、beforeMount()。理想情况下必须调用哪个请求？为什么？
【问题讨论】：
标签： asynchronous vue.js vuejs2 lifecycle vue-resource
视情况而定。
对于用户体验，这取决于您想要什么。您是否要立即显示路线，但在此路线内容上显示加载微调器？
或者你想等到数据被提取，然后显示路线？ （这可能会产生应用程序滞后的错觉）
如果你想做我提到的第一种方式，那么你可以在你的组件的 created 钩子中做。
【讨论】：
TL;DR 在一般（且安全）的情况下，使用
created()。
Vue的初始化代码是同步执行的。
从技术上讲，您在beforeCreate()、created()、beforeMount() 中运行的任何 ASYNChronous 代码只会在这些钩子完成所有后响应。查看演示：
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() 之后生成的任何内容吗？
beforeMount()
created() 上没有的任何东西，beforeMount() other than the compiled this.$options.render render function（见source as well）上提供的任何东西，所以这种情况一定是非常罕见的情况。【讨论】：
如上所述，Vue 和 React 都存在的关键问题是，如果您发出网络请求并且数据在组件创建之前到达，则没有实例可以设置数据。
beforeCreated 类似于 React 的 componentWillMount。您通常不想在这里执行网络请求，因为您可能会在组件存在之前取回数据。就像设置this.data = data但是没有组件，所以this还不存在。
在 React 中更好的地方是 componentDidMount，但我们不在乎。在Vue中，一个更好的地方是created，因为组件已经创建好了，所以this是存在的。
这是一个例子：
<template>
<div>
<span v-if="error">{{ error }}</span><br>
I like:<br>
{{ data }}
</div>
</template>
<script>
export default {
data() {
return {
data: '',
error: undefined,
}
},
async created() {
try {
const response = await axios.get('/endpoint/stuff')
this.data = response
} catch (err) {
this.error = err
}
},
}
</script>
【讨论】：
vue-router 文档对从服务器检索组件渲染所需的数据时使用的模式提供了一些建议（链接见底部）。
要确定在哪里执行 GET 请求，他们首先会询问您是否要导航到 before 异步 GET 请求启动或 之后
如果您想获取数据然后导航到路线（导航之前），那么文档建议在传入组件的beforeRouteEnter() 守卫中执行异步请求，确保调用@987654323 @ in beforeRouteEnter() 完成异步数据请求后。如果您选择此模式，您将希望显示某种加载指示器，因为在获取数据之前不会出现到组件的路由/渲染的导航。
如果您想导航到路线然后发起请求（导航后），那么文档建议在 created() 钩子中执行请求并使用 v-if 有条件地显示组件正在加载，发生错误，或者数据到达后的视图。
强烈建议查看文档，他们有代码示例，而且写得很好。 https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation
【讨论】：