I'd like to know how before I render a page, I want to send an async GET request to my server to retrieve data and populate the properties in data. I heard the best way to do this is to call the function that sends this request in one of the three lifecycle hooks Vue js offers that operate before the DOM is rendered. The three are beforeCreate()
, created()
, beforeMount()
. Which one must this request be called in ideally? And why?
相关问题
- Axios OPTIONS instead of POST Request. Express Res
- Vue.js - set slot content programmatically
- Simple vue app doesn't show anything
- Load script async?
- Getting Uncaught TypeError: …default is not a cons
相关文章
- Best way to dynamically change theme of my Vue.js
- vue-router how to persist navbar?
- With a Promise, why do browsers return a reject tw
- Asynchronous SHA256 Hashing
- Does aiohttp have ORM?
- How to Properly Use Vue Router beforeRouteEnter or
- Difference between nameFunction() {} and nameFunct
- Vue - best way to reuse methods
The vue-router docs have some advice for patterns to use when retrieving data from a server that is required for component render (see bottom for link).
To determine where to perform the GET request, they first ask if you want to navigate to the route before async GET request is initiated or after
If you want to fetch the data then navigate to the route (before navigation) then the docs suggest performing the async request in the
beforeRouteEnter()
guard on the incoming component making sure to callnext()
inbeforeRouteEnter()
once the async data request has been fulfilled. If you choose this pattern you will want to display some sort of loading indicator as the navigation to the route/rendering of the component will not occur until the data has been fetched.If you want to navigate to the route then initiate the request (after navigation) then the docs suggest performing the request in the
created()
hook and usingv-if
to conditionally show either that the component is loading, an error has occurred, or the view once the data has arrived.Highly recommend checking out the docs, they have code examples and its well written. https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation
It depends.
https://forum.vuejs.org/t/what-is-the-best-hook-to-call-api-to-load-initialisation-data-for-a-component/15167/2
Vue's initialization code is executed synchronously.
Technically, any asynchronous code you run in any of those hooks will only respond after all of those hooks end. See demo:
In other words, if you make an Ajax call in
beforeCreate
, no matter how fast the API responds, the response will only be processed way later, way after thecreated()
has been executed.What should guide your decision, then?
beforeCreate()
data
right away?created()
beforeCreate()
andcreated()
, so if you assign some data beforecreated()
, it would be lost.created()
?beforeMount()
created()
and is available atbeforeMount()
other than the compiledthis.$options.render
render function (see source as well), so this case must really be a rare situation.As mentioned above, the key issue that exists in both Vue and React is, if you make a network request and the data arrives before the component is created, there is no instance to set the data to.
beforeCreated
is similar to React'scomponentWillMount
. You generally wouldn't want to execute a network request here because you might get your data back before the component exists. It's like settingthis.data = data
but there is no component, sothis
doesn't exist yet.A better place in React is
componentDidMount
, but we don't care about that. In Vue, a better place iscreated
because the component has been created already, sothis
exists.Here is an example: