This article mainly introduces the correct use of () to you, and shares it for your reference and learning. I won’t say much below, let’s take a look at the detailed introduction together.
What is ()
The official documentation is explained as follows:
Execute a delayed callback after the next DOM update loop ends. Use this method immediately after modifying the data to obtain the updated DOM.
The focus of this sentence in the official document I understand is on the last half of the sentence to obtain the updated DOM. The implication of obtaining the updated DOM is that the operation requires the updated DOM and cannot use the previous DOM or use the previous DOM or have problems, so this Vue method for obtaining the updated DOM is derived. Therefore, the execution of the js code that is placed in the () callback function should be operated on the DOM, such as the Swiper extension package.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
When do you need to use ()
- You're in the Vue life cycle
created()The DOM operation performed by the hook function must be placed in()in the callback function. What is the reason? The reason iscreated()When the hook function is executed, the DOM actually does not render any of it, and it is futile to perform DOM operations at this time, so you must put the js code of the DOM operation into it.()in the callback function. The corresponding one is the mounted hook function, because all DOM mounting and rendering are completed when the hook function is executed, there will be no problem in performing any DOM operations in the hook function. - When an operation to be performed after the data changes and this operation requires the use of the DOM structure that changes with the data changes, this operation should be put
()in the callback function.
The reason is that Vue performs dom updates asynchronously. Once data changes are observed, Vue will open a queue and then push the watcher that observes data changes in the same event loop into this queue. If this watcher is fired multiple times, it will only be pushed to the queue once. This buffering behavior can effectively remove unnecessary calculations and DOm operations caused by duplicate data. In the next event loop, Vue will clear the queue and perform the necessary DOM updates.
When you set = 'new value', the DOM will not be updated immediately, but will only perform the necessary DOM update when the asynchronous queue is cleared, that is, the update will be performed at the beginning of the next event loop. If you want to do something based on the updated DOM status at this time, problems will arise. . In order to wait for Vue to complete update of the DOM after the data changes, you can use it immediately after the data changes (callback). In this way, the callback function will be called after the DOM update is completed.
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.