我想知道在渲染页面之前,我想向服务器发送一个异步GET请求来检索数据并填充数据中的属性。我听说最好的方法是在Vue js提供的三个生命周期钩子中的一个中调用发送此请求的函数。这三个钩子是beforeCreate()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,created()
,xm1n1x,xm1n1x,xm1n1x,xm1n1x,xm1n1xbeforeMount()
。理想情况下应该调用哪个请求?为什么?
4条答案
按热度按时间fnx2tebb1#
TL;DR在一般(安全)情况下,使用
created()
。Vue的初始化代码同步执行。
从技术上讲,你在
beforeCreate()
,created()
,beforeMount()
中运行的任何ASYNChronous代码都只会在***所有***钩子完成后才响应。换句话说,如果您在
beforeCreate()
中进行 AJAX 调用,无论API响应有多快,响应都只能在执行created()
之后进行处理。那么,什么应该指导你的决定呢?
beforeCreate()
data
?created()
beforeCreate()
和created()
之间初始化,因此如果您assign some data beforecreated()
, it would be lost。created()
之后生成的任何内容吗?beforeMount()
created()
上没有的东西,在beforeMount()
other than the compiledthis.$options.render
render function上有(也请参阅源代码),所以这种情况一定是非常罕见的。monwx1rj2#
vue-router文档对从服务器检索组件渲染所需的数据时使用的模式有一些建议(参见底部的链接)。
为了确定在哪里执行GET请求,他们首先询问您是否要在发起异步GET请求之前或之后导航到路由
如果你想获取数据,然后导航到路由(before navigation),则文档建议在传入组件的
beforeRouteEnter()
防护中执行异步请求,确保在异步数据请求完成后在beforeRouteEnter()
中调用next()
。如果选择此模式,则需要显示某种加载指示符作为路由/导航的导航。直到数据已经被取出,才进行组件的呈现。如果你想导航到路由然后发起请求(* 在导航之后 *),那么文档建议在
created()
钩子中执行请求,并使用v-if
有条件地显示组件正在加载,发生错误,或者数据到达后的视图。强烈推荐查看文档,他们有代码示例,而且写得很好。https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation
klsxnrf13#
如上所述,Vue和React中存在的关键问题是,如果您发出网络请求,并且数据在组件创建之前到达,则没有示例可以设置数据。
beforeCreated
类似于React的componentWillMount
。你通常不想在这里执行网络请求,因为你可能会在组件存在之前取回数据。这就像设置this.data = data
,但没有组件,所以this
还不存在。在React中更好的位置是
componentDidMount
,但我们不关心这个。在Vue中,更好的位置是created
,因为组件已经创建,所以this
存在。下面是一个例子:
bvk5enib4#
看情况
这取决于您想要的用户体验。是否希望立即显示路由,但在此路由内容上显示加载微调器?
或者你想等到数据被获取,然后显示路由吗?(这可能会给予人一种应用程序滞后的错觉)
如果你想做我提到的第一种方式,那么你可以在你的组件的创建钩子中做。
https://forum.vuejs.org/t/what-is-the-best-hook-to-call-api-to-load-initialisation-data-for-a-component/15167/2