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

Question

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

Answer 1

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

从技术上讲,您在任何这些挂钩中运行的任何异步代码只会在所有挂钩结束后响应.看演示:

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>

换句话说,如果您进行Ajax调用beforeCreate,无论API响应的速度有多快,响应将仅created()在执行后的方式稍后处理.

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

• 只需要尽快触发通话？
  • 使用 beforeCreate()
  • 为什么？
    • 它比任何一个钩子运行得更快,但......
• 需要立即阅读或修改data？
  • 使用 created()
  • 为什么？
    • 状态仅在beforeCreate()和之间初始化created(),因此如果您之前分配了一些数据created(),它将会丢失.
• 需要之后产生的任何东西created()？
  • 使用 beforeMount()
  • 为什么？
    • 我不知道什么是不可用created(),并可在beforeMount() 其他比编译this.$options.render 渲染功能(参见源以及),所以这种情况下,必须确实是一个罕见的情况.

Answer 2

如上所述，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>

Answer 3

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

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

如果你想，然后导航到获取数据的途径（导航前），那么文档建议执行的异步请求beforeRouteEnter()的传入组件，确保呼吁后卫next()在beforeRouteEnter()一次异步数据请求已完成。如果选择此模式，则将要显示某种加载指示符，因为在获取数据之前将不会导航到组件的路线/渲染。

如果您想导航到路线，然后发起请求（在导航之后），那么文档建议在created()挂钩中执行请求并使用v-if用于有条件地显示组件正在加载，发生错误或在数据包含后查看到了。

强烈建议您查看文档，他们提供了代码示例并编写得井井有条。 https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation