In which life cycle is ajax in vue generally placed?

Ajax requests in vue are generally placed in the "created" cycle. Benefits: 1. It can obtain server data faster and reduce page loading time; 2. It helps with consistency because ssr does not support it. beforeMount, mounted hook functions.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue life cycle

• ##beforeCreate (before creation) : During data observation and initialization The event has not started yet, data, watcher, and methods do not exist yet, but $route already exists, and operations such as redirection can be performed based on the routing information.

• created (after creation): Called after the instance is created. Data can be accessed at this stage, using watcher, events, methods, that is to say, data observation ( data observer) and event/watcher event configuration has been completed. But the dom has not been mounted yet. This stage allows http request operations to be performed.

• beforeMount (before mounting) : Parse HTML to generate AST nodes, and then dynamically generate rendering functions based on the AST nodes. The relevant render function is called for the first time (emphasis added).

• mounted (after mounting): Called after the mounting is completed, execute the render function to generate virtual dom, create a real dom to replace the virtual dom, and mount it to the instance. You can operate the dom, such as event monitoring

• beforeUpdate: After vm.data is updated, it is called before the virtual dom is re-rendered. This hook can be called after modifying the vm.data update, but before the virtual DOM is re-rendered. This hook can be called after modifying the vm.data update, but before the virtual DOM is re-rendered. In this hook, vm.data can be modified and no additional buffering and rendering process will be triggered.

• updated: Called after the virtual dom is re-rendered. If $vm.data is modified again, beforeUpdate and updated will be triggered again, entering an infinite loop.

• beforeDestroy: Called before the instance is destroyed, which means that the instance can still be called at this stage.

• destroyed: Called after the instance is destroyed, all event listeners have been removed, and the child instance has been destroyed

In which life cycle of vue is ajax placed?

Generally, data requests can be sent in created and mounted. However, most of the time, requests will be sent in created.

Created usage scenario: If the page is rendered for the first time, it comes from the back-end data. Because at this time the data has been mounted to the vue instance.

In created (if you want the first selected data to come from the backend, send a request here) (only asynchronous requests are sent, rendering is performed after the backend responds), beforeMount, mounted ( Sending a request in mounted will perform secondary rendering) and call these three hook functions.

Because data has been created in these three hook functions, the data returned by the server can be assigned. But the most commonly used one is to call asynchronous requests in the created hook function, because calling asynchronous requests in the created hook function

Benefits:

The first point: it can be faster Obtain server-side data and reduce page loading time;

Second point: Putting it in created helps consistency, because ssr does not support beforeMount and mounted hook functions.

[Related recommendations:

vue.js tutorial]

The above is the detailed content of In which life cycle is ajax in vue generally placed?. For more information, please follow other related articles on the PHP Chinese website!