The passive vue
vue documents mentioned in
Vue also corresponds to the passive option addEventListener provides .passive modifier.
But it did not mention the role of passive, in fact, there is implied in the document, click addEventListener or passive jump to MDN documentation .
Click passive, jump mdn document.
passive: When Boolean, set to true, indicate listener never call preventDefault (). If the listener still call this function, the client will ignore it and throw a console warning.
passive representation listener function does not call the preventDefault (), then what scenario is it? It found What are passive event listeners?
Problem: All modern browsers have a threaded scrolling feature to permit scrolling to run smoothly even when expensive JavaScript is running, but this optimization is partially defeated by the need to wait for the results of any touchstart and touchmove handlers, which may prevent the scroll entirely by calling preventDefault() on the event.
Solution: {passive: true}
By marking a touch or wheel listener as passive, the developer is
promising the handler won’t call preventDefault to disable scrolling.
This frees the browser up to respond to scrolling immediately without
waiting for JavaScript, thus ensuring a reliably smooth scrolling
experience for the user.
The above-mentioned problems and answers translates
Question: all modern browsers, even in very expensive js run, there will be a rolling program line characteristics to allow smooth scrolling, however, touchstart and touchmove calling preventDefault () can stop rolling, so the rolling optimization sometimes it is limited touchstart and touchmove of.
Solution: by identifying a touch wheel or listener is passive, it is equal to developers to ensure that the listener does not call the preventDefault (). The liberation of the browser, without waiting for the results of js run, will respond immediately scroll, which ensures a smooth scrolling experience.
to sum up
passive mainly used in the scroll event of the mobile terminal, to improve browser responsiveness, enhance the user experience. Because passive = true equals in advance to tell the browser, touchstart and touchmove not prevent the default event, the beginning of the hand touch, the browser can give an immediate response; otherwise, the hand touching the screen, but to wait for the results of touchstart and touchmove, this step is more, the response time is longer, sent the user experience.
reference
Event in the Listeners are passive the What?
.Passive modifier of vue
