Shulou(Shulou.com)06/02 Report--

This article mainly introduces what the ajax in vue generally put in the life cycle, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Vue ajax requests are generally placed in the "created" cycle, benefits: 1, faster access to server-side data, reducing page loading time; 2, contribute to consistency, because ssr does not support beforeMount, mounted hook functions.

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

Vue lifecycle

BeforeCreate (before creation): data, watcher, and methods do not exist yet before data observation and initialization events start, but $route already exists, so you can redirect based on routing information.

Created (after creation): called after the instance is created, the data can be accessed at this stage, using watcher, events, methods, which means the configuration of data observation (data observer) and event/watcher events is complete. But dom has not been mounted at this time. This phase allows http request operations to be performed.

BeforeMount (before mounting): parse HTML to generate AST nodes, and then dynamically generate rendering functions based on AST nodes. The related render function is called for the first time (highlight).

Mounted (after mounting): called after the mount is completed, execute the render function to generate a virtual dom, create a real dom to replace the virtual dom, and mount it to the instance. You can manipulate dom, such as event listening

After the beforeUpdate:vm.data update, the virtual dom is called before re-rendering. After the hook can modify the vm.data update, the virtual dom is called before re-rendering. After the hook can modify the vm.data update, the virtual dom is called before re-rendering. The vm.data can be modified in this hook and does not trigger an additional rush rendering process.

Updated: it is called after the virtual dom is re-rendered. If you modify $vm.data again, beforeUpdate and updated will be triggered again, and you will enter an endless 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 lifecycle of vue is ajax placed?

Generally, data requests can be sent in created,mounted, but most of the time, requests are sent in created.

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

Call in created (if you want the first selected data to come from the backend, send the request here) (only the asynchronous request is sent, and the rendering is carried out after the backend response), beforeMount and mounted (secondary rendering is performed in mounted).

Because in these three hook functions, data has been created, you can assign the data returned by the server side. But the most common is to call an asynchronous request in the created hook function, because the asynchronous request is called in the created hook function

Benefits:

The first point: faster access to server-side data, reducing page loading time

The second point: putting it in created helps with consistency, because ssr does not support beforeMount and mounted hook functions.

Thank you for reading this article carefully. I hope the article "what is the life cycle of ajax in vue" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.